'when I import firebase using import * as firebase from 'firebase';?
shows me this error?
Unable to resolve "firebase" from "App.js" Failed building JavaScript bundle.
I have tried looking for answers but these were for previous verisons for firebase I also tried adding this import too but didn't solved my problem.
import firebase from '@firebase/app'
},
"dependencies": {
"expo": "^33.0.0",
"firebase": "^6.3.0",
"native-base": "^2.12.1",
"react": "16.8.3",
"react-dom": "^16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-
33.0.0.tar.gz",
"react-native-gesture-handler": "^1.3.0",
"react-native-web": "^0.11.4",
"react-navigation": "^3.11.1"
},
can someone help
Solution 1:[1]
You should update the imports & code this way to make it work out.
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
const firebaseConfig = { // Have the firebase config here
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
// Use this to initialize the firebase App
const firebaseApp = firebase.initializeApp(firebaseConfig);
// Use these for db & auth
const db = firebaseApp.firestore();
const auth = firebase.auth();
export { auth, db };
Solution 2:[2]
In the docs of firebase npm package they say:
If you are using native ES6 module with --experimental-modules flag, you should do:
// This import loads the firebase namespace. import firebase from 'firebase/app'; // These imports load individual services into the firebase namespace. import 'firebase/auth'; import 'firebase/database';
So try replacing
import * as firebase from 'firebase'
with
import firebase from 'firebase/app'
You may also consider using firebase wrapper build for react-native https://github.com/invertase/react-native-firebase. It will require from you an extra setup described in the docs, but works better.
Solution 3:[3]
Try:
npm install --save firebase
Solution 4:[4]
Import like that
import firebase from 'firebase/compat/app';
import "firebase/storage";
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
};
// Initialize Firebase
const app = !firebase.apps.length
? firebase.initializeApp(firebaseConfig)
: firebase.app();
const db = app.firestore;
const auth = app.auth;
const storage = firebase.storage;
export { auth, db, storage };
Solution 5:[5]
If You are using Version 9 then don’t forget that things changed a bit for importing firebase Now there is a “compatibility” option so can use the /compat folder in your imports. Here is an example.
//to use firebase app
import firebase from 'firebase/app'; //older version
import firebase from 'firebase/compat/app'; //v9
//to use auth
import 'firebase/auth'; //older version
import 'firebase/compat/auth'; //v9
//to use firestore
import 'firebase/firestore'; //Older Version
import 'firebase/compat/firestore'; //v9
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 | Kesava Karri |
| Solution 2 | damienix |
| Solution 3 | jsnid00 |
| Solution 4 | Mubashar Hassan |
| Solution 5 | Alazar-dev |
