Module not found: Can't resolve 'firebase' in react js

Question

In my reactjs project I have installed firebase using 'npm i firebase'. And inside of src folder I have created firebase.js file for firebase config.

import firebase from 'firebase'

const firebaseConfig = {
  apiKey: "******",
  authDomain: "****",
  projectId: "***",
  storageBucket: "*****",
  messagingSenderId: "****",
  appId: "****"
};

firebase.initializeApp(config);

export default firebase

Even after installing firebase in my project. It gives error:

./src/firebase.js
Module not found: Can't resolve 'firebase' in '/home/rupak/Projects/web/firebasereact/src'

Can anyone find the problem?

Answer 1

You are not using the new Modular syntax. You can keep using existing code by changing the imports to compat version:

import firebase from 'firebase/compat/app'
import 'firebase/firestore'
// import 'firebase/[SERVICE_NAME]'

However, I'd recommend upgrading to the new Modular SDK , which offers some benefits with tree-shaking. Checkout this Firecast for detailed information:

Getting started with Firebase for Web

Answer 2

Refer Firebase docs if you are using newer version initializeApp is moved to firebase/app package

Answer 3

Hey I had the same situation stated above... But by applying this:

import firebase from 'firebase/compat/app'
import 'firebase/firestore'
// import 'firebase/[SERVICE_NAME]'
//export
export const auth = firebase.auth();
export const googleAuthProvider = new firebase.auth.GoogleAuthProvider();

I only removed the (/app) , and it worked... THANK YOU

Answer 4

I have faced the same issue, It seems firebase 9.17.0 just dropped.

Rolling back to the 9.16.0 solved the problem.

for yarn package:

yarn add firebase@9.16.0

for npm:

 npm i firebase@9.16.0

Now check your package.json file looks like this.

"firebase": "9.16.0",