'Can't find variable: IDBIndex on firebase/react native(expo)

I am developing a RN app in Expo with firebase as backend. So far, the app only uses firebase auth and firestore and for whatever reason, I randomly started getting the error of ReferenceError: Can't find variable: IDBIndex. I adjusted my firebase config to suit the v9 standards instead of using the compat package. I ensured my app was not using Google Analytics. I have also downgraded to [email protected] which matches up with the expo documentation and this other similar post. I have also git reverted into previous versions of the app (with earlier dependencies and code) when it was working but still got back the same error. When this occurred, I entirely reinstalled node and npm because I thought that was the only other possible reason this could be happening but that was to no avail as well (getting the same IDB error). I still think this is a firebase related issue, but I am pretty much all out of ideas as to what it could be.

Here is my firebase config:

import { initializeApp } from 'firebase/app'
import { getAuth, connectAuthEmulator } from "firebase/auth";
import { getFirestore, connectFirestoreEmulator } from "firebase/firestore";

import {
  FIREBASE_API_KEY,
  FIREBASE_AUTH_DOMAIN,
  FIREBASE_PROJECT_ID,
  FIREBASE_STORAGE_BUCKET,
  FIREBASE_MESSAGING_SENDER_ID,
  FIREBASE_APP_ID,
  FIREBASE_MEASUREMENT_ID,
} from '@env';

const firebaseConfig = {
  apiKey: FIREBASE_API_KEY,
  authDomain: FIREBASE_AUTH_DOMAIN,
  projectId: FIREBASE_PROJECT_ID,
  storageBucket: FIREBASE_STORAGE_BUCKET,
  messagingSenderId: FIREBASE_MESSAGING_SENDER_ID,
  appId: FIREBASE_APP_ID,
  measurementId: FIREBASE_MEASUREMENT_ID,
};

const app = initializeApp(firebaseConfig);

export default app;
export const auth = getAuth(app);
export const firestore = getFirestore(app);

if (process.env.NODE_ENV === "development") {
    connectAuthEmulator(auth, "http://localhost:9099");
    connectFirestoreEmulator(firestore, "localhost", 8080);
}

Do let me know if you need to see more files or need to know more details.



Solution 1:[1]

The other fixes mentioned in this thread are definitely all valid (I have seen other forum posts suggesting the firebase downgrade but in my case it did not work.)

I thought it could be helpful for me to confirm what fixed the problem in my case. The problem arose from when one of my team members used npm instead of expo (which defaults to yarn) to install a dependency. This caused syncing issues between the yarn.lock and package-lock.json. This alone wouldn't have caused much of an issue because a simple yarn or yarn install <dependency> would have solved the issue. However, this dependency happened to require pre-existing dependencies which were of a different version then the ones "expected" by my version of expo. How this IDBIndex error was triggered is still a mystery to me, but in the end all I had to do was remove all my lock files and node_modules, perform an expo updateand finally do a yarn to reinstall all now-compatible packages.

If anyone stumbling across this answer can give a possible explanation as to why this fixed things, that would be much appreciated.

Solution 2:[2]

firebaser here

There was a problem in our JavaScript SDKs, where Firebase Installation Services used a version of IDB that doesn't support ESM outside of browser environments. The issue has been fixed in version 9.6.9 of the JavaScript SDK, so be sure to update to that.

Solution 3:[3]

I'm getting the same issue, looks like, it's breaking on "firebase": "^9.6.8", which was released a few days ago. Use "firebase": "9.6.7",

Solution 4:[4]

I've been getting the same issue, I've tried all the same things as you to no avail. I symbolicated the logs from firebase test lab and came up with this:

Stacktrace

Generally I have no idea how all of these libraries work together, but are you using typesense with firestore? I wonder if your stack trace calls out the same files, but I can't find any smoking gun here. I'll keep updating this thread if I find something. (I would have commented but I don't have the rep yet)

Update: Looks like my build just fixed itself somehow, even submitting builds from this weekend that would constantly crash. So truly I'm not sure what happened but it may be resolved

Solution 5:[5]

I had the same issue, my solution was to downgrade the Firebase version from 9.6.8 to 8.2.3.

Here is a reference that could be helpful.

https://github.com/expo/expo-cli/issues/3066

Solution 6:[6]

I had this same issue, and after trying multiple different firebase versions, this is the one that fixed the error for me:

npm install [email protected] --save

Here's where I found this: Get Started with Cloud Firestore

Solution 7:[7]

Here is what worked for me (using yarn):

  1. deleted node_modules
  2. deleted yarn.lock
  3. downgraded to firebase "9.6.7" yarn add [email protected]
  4. downloaded packages using yarn install
  5. made sure all my imports are from the correct firebase library. I am using expo, and I had imported both firebase and react-native-firebase, which was causing trouble. I deleted react-native-firebase for now until I eject if needed.
  6. Fixed my imports. Now you import firebase like this import firebase from "firebase/compat"

Solution 8:[8]

if you use firebase analytics, remove it

firebase version "firebase": "9.6.7"

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
// import { getAnalytics } from "firebase/analytics";

const firebaseConfig = {
  apiKey: process.env.FIREBASE_APP_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.FIREBASE_APP_ID,
  measurementId: process.env.FIREBASE_MEASUREMENT_ID,
};

export const app = initializeApp(firebaseConfig);

// export const analytics = getAnalytics(app);

export const firestore = getFirestore(app);

Solution 9:[9]

Had the same issue, I just downgraded firebase version and it worked. you can use this code for downgrading:

npm install [email protected] --save

Solution 10:[10]

This worked for Expo:

https://github.com/firebase/firebase-js-sdk/issues/6253#issuecomment-1123923581

// metro.config.js
const { getDefaultConfig } = require("@expo/metro-config");

const defaultConfig = getDefaultConfig(__dirname);

defaultConfig.resolver.assetExts.push("cjs");

module.exports = defaultConfig;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 perrywinkle
Solution 2
Solution 3 Junius L.
Solution 4
Solution 5 Nathali Aguayo
Solution 6 Leena D.
Solution 7 Haytham
Solution 8 MG Koo
Solution 9 Tanjil Pranto
Solution 10 Thomas Hagström