ReferenceError：找不到变量：firebase。我无法将应用程序从 Expo 连接到 Firebase？

Question

I am trying to create an App with a Database in which I will add several collections in Cloud Firestore. but it is impossible, since the app was broken when I added the code to connect the app.

I've seen various solutions on Stack and GitHub, but after hours of testing, it doesn't work.

bud search

Firebase v9 modular - Can't find variable: IDBIndex

https://github.com/expo/expo/issues/8089

For now the Application is very simple, only two files are involved in Firebase and nothing works

I have changed the way to call Firebase in several ways:

import firebase from 'firebase/app'
import 'firebase/firestore'

import {initializeApp} from 'firebase/app'
import 'firebase/firestore'

import firebase from 'firebase/compat/app'
import 'firebase/compat/firestore'

Currently the code I have is the following:

import firebase from 'firebase/app'
import 'firebase/firestore'

const firebaseConfig = {
    apiKey:       "xxxxxxxxxxxxxxxx",
    authDomain:   "xxxxxxxxxxxxxxx",
    projectId:    "xxxxxxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxx",
    appId:             "xxxxxxxxxxx"
}

export const firebaseApp = firebase.initializeApp(firebaseConfig)

file actions.js

import { firebaseApp } from "./firebase"
import firebase from 'firebase/app'
import 'firebase/firestore'

const db = firebase.firestore(firebaseApp)

export const isUserLogged = () => {
  let isLogged = false
  firebase.auth().onAuthStateChanged((user)=> {
    user !== null && (isLogged = true)
  })
  return isLogged
}

And the errors that the console shows me:

**

TypeError: undefined is not an object (evaluating '_app.default.initializeApp')
- ... 9 more stack frames from framework internals
Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.
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

**

How can I correct this error?

Answer 1

You're importing functions from the newer modular SDK, but then are tryign to call the older namespaced APIs. That won't work.

I recommend using the code samples from getting started with Firebase Authentication on the web , getting the currently signed in user and the upgrade guide .

With the new modular syntax, you can build a function that returns a promise with first auth state with:

import { initializeApp } from "firebase/app";
import { getAuth, onAuthStateChanged } from "firebase/auth";

const firebaseConfig = {
  // ...
};

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

export const isUserLogged = () => {
  return new Promise((resolve, reject) => {
    let unsubcribe = onAuthStateChanged(auth, (user) => {
      unsubcribe();
      resolve(user !== null)
    })
  });
}

---

If you want to stick to using the namespaced API, you can either import an older version of Firebase (eg the latest v8 release) or use the compat path for the new SDK, in the same upgrade guide I linked above.