Google Firebase is missing directory file and crashing React Native application

Question

I have a react native application. I am currently trying to integrate Google Firebase into my application for auth and storage. I installed firebase by running npm install --save firebase and it installed version "firebase": "^9.12.1". I setup and configured my firebase.js file as shown on google. When I run my react native application and call db from the firebase.js file it crahsed the entire application.

error:

 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)

Here is my config file:

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}

Here is where i imported the 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)
  
  ...

I have no idea why I am getting this error and when readying through the tracelog I couldnt figure out how to fix the issue.

Can anyone help me

Answer 1

Google Firebase version after 9.6.11 causes issues with compatibility when used in Expo. I installed a slightly order and more stable version of Google firebase.

npm install --save firebase@9.6.11