I’m trying to read and write to firestore, use firebase’s authentication, and firebase’s storage within a expo managed react-native application.
Full Error:
While trying to resolve module `firebase` from file `C:UsersjoshuDesktopVSProjectsVolleyballConnectfirebase.js`, the package `C:UsersjoshuDesktopVSProjectsVolleyballConnectnode_modulesfirebasepackage.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:UsersjoshuDesktopVSProjectsVolleyballConnectnode_modulesfirebaseindex`. Indeed, none of these files exist: * C:UsersjoshuDesktopVSProjectsVolleyballConnectnode_modulesfirebaseindex(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json) * C:UsersjoshuDesktopVSProjectsVolleyballConnectnode_modulesfirebaseindexindex(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
My firebase config file:
import firebase from "firebase"; import { initializeApp } from "firebase/app"; import "firebase/firestore"; import "firebase/auth"; import "firebase/storage"; // I'm using the example key here, I have the correct config const firebaseConfig = { apiKey: "api-key", authDomain: "project-id.firebaseapp.com", databaseURL: "https://project-id.firebaseio.com", projectId: "project-id", storageBucket: "project-id.appspot.com", messagingSenderId: "sender-id", appId: "app-id", measurementId: "G-measurement-id", }; if (firebase.apps.length === 0) { initializeApp(firebaseConfig); } const db = firebase.firestore(); const auth = firebase.auth(); const storage = firebase.storage(); export { db, auth, storage };
I installed the firebase
package with:
expo install firebase
Any help would be greatly appreciated. Thank you!
Advertisement
Answer
To reduce the size of the app, firebase SDK (v9.0.0) became modular. You can no longer do the import statement like before on v8.
You have two options.
- Use the backwards compatible way. (it will be later removed):
This:
import firebase from 'firebase/app'; import 'firebase/auth'; import 'firebase/firestore';
Should be changed to:
// v9 compat packages are API compatible with v8 code import firebase from 'firebase/compat/app'; import 'firebase/compat/auth'; import 'firebase/compat/firestore';
- Refactor your code now.
From this:
import firebase from "firebase/compat/app"; import "firebase/compat/auth"; const auth = firebase.auth(); auth.onAuthStateChanged(user => { // Check for user status });
To this:
import { getAuth, onAuthStateChanged } from "firebase/auth"; const auth = getAuth(firebaseApp); onAuthStateChanged(auth, user => { // Check for user status });
You should definitely check the documentation