I'm using React Native and Expo and I'm trying to use Firebase V9 (Modular version). I'm running into an error whenever I try to use a firebase function outside of my config file. For example, I have the signUpWithEmail function in firebase.tsx, but when I try to use it in my SignUpScreen.tsx, it gives me a
Can't find variable: IDBIndex.
Seems like it has to do with my node_modules??
Maybe the wrong versions?
I also don't have Google Analytics enabled.

Here are my code files:

firestore.ts:

import { initializeApp } from 'firebase/app';
import { createUserWithEmailAndPassword, getAuth } from 'firebase/auth';
import Constants from 'expo-constants';

const firebaseConfig = {
  apiKey: Constants.manifest?.extra?.firebaseApiKey,
  authDomain: Constants.manifest?.extra?.firebaseAuthDomain,
  projectId: Constants.manifest?.extra?.firebaseProjectId,
  storageBucket: Constants.manifest?.extra?.firebaseStorageBucket,
  messagingSenderId: Constants.manifest?.extra?.firebaseMessagingSenderId,
  appId: Constants.manifest?.extra?.firebaseAppId,
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

// AUTHENTICATION // ---------------------------------------------------------
export const signUpWithEmail = async (fName: string, lName: string, email: string, password: string) => {
    try {
        await createUserWithEmailAndPassword(auth, email, password);
        console.log('Success!')
    } catch (e) {
        console.log(e);
    }
}

SignUpScreen.tsx:

import React, { useState } from 'react';
import { StyleSheet, View} from 'react-native';
import MyButton from '../components/MyButton';
import MyField from '../components/MyField';
import { signUpWithEmail } from '../services/firebase';


export default function SignUpScreen() {
  const [fName, setFName] = useState("");
  const [lName, setLName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  return (
    <View style={styles.container}>
        <MyField title='First Name' type='text' onChangeFn={setFName}/>
        <MyField title='Last Name' type='text' onChangeFn={setLName}/>
        <MyField title='Email' type='text' onChangeFn={setEmail}/>
        <MyField title='Password' type='text' onChangeFn={setPassword}/>
        <MyButton text="Sign Up" type="primary" size="large" onPressFn={
          () => { signUpWithEmail(fName, lName, email, password) }} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  fixToText: {
    flexDirection: 'column',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
});

Here is my error when I run the app:

ReferenceError: Can't find variable: IDBIndex
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/@react-native/polyfills/error-guard.js:49:36 in ErrorUtils.reportFatalError
at node_modules/metro-runtime/src/polyfills/require.js:204:6 in guardedLoadModule
at http://192.168.1.189:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:140947:3 in global code

CodePudding user response：

Looks like after trying many different version numbers, "firebase": "^9.4.1" seems to finally get rid of the error! I based it off of the SDK used in this Firebase document:

https://firebase.google.com/docs/firestore/quickstart#web-version-9

CodePudding user response：

I am glad that you finally get rid of the issue, it seems like Firebase 9 version has some issues I found here https://github.com/expo/expo-cli/issues/3066 the solution, which is basically to downgrade the Firebase version to 7 or 8.