如何修复React Native Firebase包已找到但主模块无法解析报错

运行React Native项目时触发iOS Bundling failed报错，核心错误信息如下：

• 从C:\Internship\src\App.js解析firebase模块时，已成功定位到包文件C:\Internship\node_modules\firebase\package.json
• 该包main字段配置的主模块路径C:\Internship\node_modules\firebase\index不存在
• 系统遍历所有React Native支持的文件后缀、目录匹配规则均未找到有效文件，尝试匹配的路径规则为：
  • C:\Internship\node_modules\firebase\index拼接所有支持后缀（.native|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json）
  • C:\Internship\node_modules\firebase\index\index拼接上述所有支持后缀

触发报错的核心业务代码：

//Importing Libraries to create App
import React, {Component} from 'react';
import { View } from 'react-native';
import firebase from 'firebase';
import {Header} from './components/common';
import LoginForm from './components/LoginForm';

//Creating App class
class App extends Component{
    //Initalizing Firebase 
    componentWillMount(){
        firebase.initializeApp({
            apiKey: 'AIzaSyDaAOmCb2Agiu7JRLlOUG0Mv7O4VxH-Od8',
            authDomain: 'oakpark-service-app.firebaseapp.com',
            projectId: 'oakpark-service-app',
            storageBucket: 'oakpark-service-app.appspot.com',
            messagingSenderId: '662166215544',
            appId: '1:662166215544:web:e433baacc7d1a9c219068d',
            measurementId: 'G-PZ6LLVFNFD'
          });
    }

    render(){
        return(
            <View>
                <Header headerText="Login/Sign Up" />
                <LoginForm />
            </View>
        );
    }
}

//Exporting App class to use in different files
export default App;

项目中额外引入的web端脚本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Firebase v9及以上版本重构了包导出规则，不再支持从firebase根路径直接导入全量包，旧版写法import firebase from 'firebase'在高版本中无法匹配到入口文件。另外React Native原生项目中引入的两段React/ReactDOM CDN脚本是web端专用代码，在原生打包环境下无法解析，会带来额外的打包异常风险。

二选一即可：

方案一：适配Firebase v9+ 新版写法（官方推荐，包体积更小） #

新版Firebase采用按需导入模式，只引入用到的功能模块即可，修改步骤：

• 安装依赖，用到登录鉴权功能的话执行：

  npm install firebase
  

• 替换App.js中Firebase相关的导入和初始化逻辑：

  // 导入firebase核心初始化方法
  import { initializeApp } from 'firebase/app';
  // 用到什么服务就单独导入对应模块，比如鉴权就加下面这行
  // import { getAuth } from 'firebase/auth';
  
  // 原有配置不变
  const firebaseConfig = {
      apiKey: 'AIzaSyDaAOmCb2Agiu7JRLlOUG0Mv7O4VxH-Od8',
      authDomain: 'oakpark-service-app.firebaseapp.com',
      projectId: 'oakpark-service-app',
      storageBucket: 'oakpark-service-app.appspot.com',
      messagingSenderId: '662166215544',
      appId: '1:662166215544:web:e433baacc7d1a9c219068d',
      measurementId: 'G-PZ6LLVFNFD'
  };
  
  // 初始化
  const app = initializeApp(firebaseConfig);
  // 初始化其他服务示例：const auth = getAuth(app);
  

• 删除项目中引入的两段web端CDN脚本，清除缓存重新打包：

  npx react-native start --reset-cache
  npx react-native run-ios
  

方案二：降级Firebase到兼容旧写法的版本（无需改动现有业务代码） #

如果现有业务代码大量使用旧版firebase调用方式，不想逐行修改，可以直接降级到v8最终稳定版：

• 执行版本替换命令：

  npm uninstall firebase
  npm install firebase@8.10.0
  

• 删除多余的web端CDN脚本，清除缓存重启项目即可：

  npx react-native start --reset-cache
  npx react-native run-ios
  

内容的提问来源于stack exchange，提问作者AKoundinya