Expo裸工作流如何正确集成react-native-firebase及解决import语法错误

报错直接解决方案 #

你遇到的SyntaxError: Cannot use import statement outside a module报错是因为Expo Metro默认没有把@react-native-firebase相关包列为需要转译的ESM模块，按以下步骤操作即可：

• 打开项目根目录的metro.config.js，添加@react-native-firebase相关包到配置里，示例配置如下：

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

config.resolver.blockList = [
  /node_modules\/@react-native-firebase\/.*\/__tests__\//,
];
config.transformer.getTransformOptions = async () => ({
  transform: {
    experimentalImportSupport: false,
    inlineRequires: true,
  },
});
config.transpilePackages = [
  '@react-native-firebase/app',
  '@react-native-firebase/auth',
  '@react-native-firebase/messaging',
  // 后续用到其他react-native-firebase功能包也统一加在这里
];

module.exports = config;

• 清理缓存重启项目：运行npx expo start --clear命令启动项目，避免旧缓存导致报错重复出现。

react-native-firebase 接入Expo正确流程 #

不用Expo Go的场景完全可以接入原生版react-native-firebase，不需要用Web SDK，按以下步骤执行即可：

• 先把项目切换为Expo开发构建版本：运行npx expo prebuild生成原生Android/iOS工程目录，这是接入原生依赖的前提
• 安装react-native-firebase核心包：npm install @react-native-firebase/app
• 按Firebase控制台指引，分别把Android的google-services.json放到项目/android/app目录下，iOS的GoogleService-Info.plist放到项目/ios/[你的项目名]目录下
• 按需安装auth、messaging等功能模块：npm install @react-native-firebase/auth @react-native-firebase/messaging，之后把新增的包名加到之前metro.config.js的transpilePackages数组里
• 构建测试包验证功能：运行npx expo run:android或者npx expo run:ios本地打调试包，不要用Expo Go打开，直接安装到测试设备上验证功能

可替代方案 #

如果不想自己配置原生依赖，也可以用Expo官方封装的相关服务：

• 身份验证可以用expo-firebase-auth，推送通知可以直接用Expo自带的expo-notifications配合Expo推送服务
• 应用分发可以直接用Expo的EAS Build + EAS Submit能力，测试用户只需要点击安装链接就可以下载应用，不需要额外安装Expo Go，完全满足你的需求

内容的提问来源于stack exchange，提问作者On the way to success