React Native集成Firebase v9.12.1时因idb模块缺失崩溃求助

问题描述 #

在React Native应用中集成Firebase实现auth和storage功能，通过npm install --save firebase安装了"firebase": "^9.12.1"版本，按官方指引配置firebase.js后，调用导出的db时应用崩溃。报错显示Metro解析@firebase/app依赖的idb模块时，找到idb的package.json但无法找到指定的主文件/node_modules/idb/build/index.cjs。

错误日志 #

ERROR  [Error: InternalError Metro has encountered an error: While trying to resolve module `idb` from file `/Users/omarjandali/dev/RyppeApp/Mobile/Ryppe/node_modules/@firebase/app/dist/esm/index.esm2017.js`, the package `/Users/omarjandali/dev/RyppeApp/Mobile/Ryppe/node_modules/idb/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/omarjandali/dev/RyppeApp/Mobile/Ryppe/node_modules/idb/build/index.cjs`. Indeed, none of these files exist:

  * /Users/omarjandali/dev/RyppeApp/Mobile/Ryppe/node_modules/idb/build/index.cjs(.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)
  * /Users/omarjandali/dev/RyppeApp/Mobile/Ryppe/node_modules/idb/build/index.cjs/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): /Users/omarjandali/dev/RyppeApp/Mobile/Ryppe/node_modules/metro/src/node-haste/DependencyGraph.js (243:17)

  241 |
  242 |         if (error instanceof InvalidPackageError) {
> 243 |           throw new PackageResolutionError({
      |                 ^
  244 |             packageError: error,
  245 |             originModulePath: from,
  246 |             targetModuleName: to,]
Error: While trying to resolve module `idb` from file `/Users/omarjandali/dev/RyppeApp/Mobile/Ryppe/node_modules/@firebase/app/dist/esm/index.esm2017.js`, the package `/Users/omarjandali/dev/RyppeApp/Mobile/Ryppe/node_modules/idb/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/omarjandali/dev/RyppeApp/Mobile/Ryppe/node_modules/idb/build/index.cjs`. Indeed, none of these files exist:

  * /Users/omarjandali/dev/RyppeApp/Mobile/Ryppe/node_modules/idb/build/index.cjs(.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)
  * /Users/omarjandali/dev/RyppeApp/Mobile/Ryppe/node_modules/idb/build/index.cjs/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)
    at DependencyGraph.resolveDependency (/Users/omarjandali/dev/RyppeApp/Mobile/Ryppe/node_modules/metro/src/node-haste/DependencyGraph.js:243:17)
    at Object.resolve (/Users/omarjandali/dev/RyppeApp/Mobile/Ryppe/node_modules/metro/src/lib/transformHelpers.js:129:24)
    at resolve (/Users/omarjandali/dev/RyppeApp/Mobile/Ryppe/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:33)
    at /Users/omarjandali/dev/RyppeApp/Mobile/Ryppe/node_modules/metro/src/DeltaBundler/traverseDependencies.js:412:26)
    at Array.reduce (<anonymous>)
    at resolveDependencies (/Users/omarjandali/dev/RyppeApp/Mobile/Ryppe/node_modules/metro/src/DeltaBundler/traverseDependencies.js:411:33)
    at processModule (/Users/omarjandali/dev/RyppeApp/Mobile/Ryppe/node_modules/metro/src/DeltaBundler/traverseDependencies.js:140:31)
    at async addDependency (/Users/omarjandali/dev/RyppeApp/Mobile/Ryppe/node_modules/metro/src/DeltaBundler/traverseDependencies.js:230:18)
    at async Promise.all (index 0)
    at async processModule (/Users/omarjandali/dev/RyppeApp/Mobile/Ryppe/node_modules/metro/src/DeltaBundler/traverseDependencies.js:198:5)
Error: While trying to resolve module `idb` from file `/Users/omarjandali/dev/RyppeApp/Mobile/Ryppe/node_modules/@firebase/app/dist/esm/index.esm2017.js`, the package `/Users/omarjandali/dev/RyppeApp/Mobile/Ryppe/node_modules/idb/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/omarjandali/dev/RyppeApp/Mobile/Ryppe/node_modules/idb/build/index.cjs`. Indeed, none of these files exist:

  * /Users/omarjandali/dev/RyppeApp/Mobile/Ryppe/node_modules/idb/build/index.cjs(.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)
  * /Users/omarjandali/dev/RyppeApp/Mobile/Ryppe/node_modules/idb/build/index.cjs/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)
    at DependencyGraph.resolveDependency (/Users/omarjandali/dev/RyppeApp/Mobile/Ryppe/node_modules/metro/src/node-haste/DependencyGraph.js:243:17)
    at Object.resolve (/Users/omarjandali/dev/RyppeApp/Mobile/Ryppe/node_modules/metro/src/lib/transformHelpers.js:129:24)
    at resolve (/Users/omarjandali/dev/RyppeApp/Mobile/Ryppe/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:33)
    at /Users/omarjandali/dev/RyppeApp/Mobile/Ryppe/node_modules/metro/src/DeltaBundler/traverseDependencies.js:412:26)
    at Array.reduce (<anonymous>)
    at resolveDependencies (/Users/omarjandali/dev/RyppeApp/Mobile/Ryppe/node_modules/metro/src/DeltaBundler/traverseDependencies.js:411:33)
    at processModule (/Users/omarjandali/dev/RyppeApp/Mobile/Ryppe/node_modules/metro/src/DeltaBundler/traverseDependencies.js:140:31)
    at async addDependency (/Users/omarjandali/dev/RyppeApp/Mobile/Ryppe/node_modules/metro/src/DeltaBundler/traverseDependencies.js:230:18)
    at async Promise.all (index 0)
    at async processModule (/Users/omarjandali/dev/RyppeApp/Mobile/Ryppe/node_modules/metro/src/DeltaBundler/traverseDependencies.js:198:5)

相关代码 #

Firebase配置文件（firebase.js） #

import AsyncStorage from '@react-native-async-storage/async-storage';
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getFirestore } from 'firebase/firestore'
import {
  initializeAuth,
  getReactNativePersistence
} from 'firebase/auth/react-native';

const firebaseConfig = {
  ...
};

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

const db = getFirestore()

export {db}

导入db的组件代码 #

import React, { useContext, useState, useEffect } from 'react'
import { View, Text, StyleSheet, Modal, TouchableOpacity } from 'react-native'

import { Feather } from 'react-native-vector-icons'
import { PropertyDetailContext } from '../../context/PropertyDetailsContext'

import { db } from '../../../firebase'

import InvestmentModalComponent from '../GeneralComponents/InvestmentModealComponent'

const InvestmentComponent = (props) => {

  const {currentHome} = useContext(PropertyDetailContext)
  const {downPaymentAmount} = useContext(PropertyDetailContext)
  const {mortgagePayment} = useContext(PropertyDetailContext)
  const {monthlyExpenses} = useContext(PropertyDetailContext)
  const {yearlyExpenses} = useContext(PropertyDetailContext)
  const {yearlyRevenue} = useContext(PropertyDetailContext)
  const {monthlyRevenue} = useContext(PropertyDetailContext)
  const {totalExpWithoutMortgage} = useContext(PropertyDetailContext)
  const {monthlyNOI, setMonthlyNOI} = useContext(PropertyDetailContext)
  const {yearlyNOI, setYearlyNOI} = useContext(PropertyDetailContext)
  const {capRate, setCapRate} = useContext(PropertyDetailContext)
  const {monthlyCashFlow, setMonthlyCashFlow} = useContext(PropertyDetailContext)
  const {yearlyCashFlow, setYearlyCashFlow} = useContext(PropertyDetailContext)
  const {cashOnCashReturn, setCashOnCashReturn} = useContext(PropertyDetailContext)
  
  ...

解决方案 #

方案1：修复依赖安装不完整问题 #

idb包的构建文件缺失大概率是安装不完整导致，执行以下步骤：

• 删除node_modules文件夹和package-lock.json（或yarn.lock）
• 清理Metro缓存：npx react-native start --reset-cache
• 重新安装依赖：npm install（或yarn install）

方案2：配置Metro忽略idb模块 #

React Native环境不需要idb（浏览器环境的IndexedDB封装），可让Metro跳过该模块解析：

1. 项目根目录创建或修改metro.config.js
2. 添加如下配置：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

module.exports = mergeConfig(getDefaultConfig(__dirname), {
  resolver: {
    resolveRequest: (context, moduleName) => {
      if (moduleName === 'idb') {
        return {
          filePath: require.resolve('@firebase/app/dist/index.cjs.js'),
          type: 'sourceFile'
        };
      }
      return context.resolveRequest(context, moduleName);
    }
  }
});

3. 重启Metro服务：npx react-native start --reset-cache

方案3：降级Firebase版本 #

部分v9版本存在React Native兼容性问题，尝试降级到稳定版本：

• 执行npm install firebase@9.6.11 --save
• 清理缓存并重启服务：npx react-native start --reset-cache

方案4：移除不必要的Firebase模块 #

若不需要Analytics功能，可删除相关代码减少依赖加载：
修改firebase.js：

import AsyncStorage from '@react-native-async-storage/async-storage';
import { initializeApp } from "firebase/app";
import { getFirestore } from 'firebase/firestore'
import {
  initializeAuth,
  getReactNativePersistence
} from 'firebase/auth/react-native';

const firebaseConfig = {
  ...
};

const app = initializeApp(firebaseConfig);

// 移除Analytics相关代码
// const analytics = getAnalytics(app);

const db = getFirestore()

export {db}

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