'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