0

Hi i'm building a facebook clone and encountered this error while trying to setup google authentication. ./src/firebase.js Module not found: Can't resolve 'firebase' in 'D:\Coding\fb-clone\src' here is my firebase.js file:

import firebase from "firebase"; const firebaseConfig = { apiKey: "AIzaSyAPjfkQ6hDKJ_siNyv0buGCKEDpT95f3h0", authDomain: "facebook-clone-43aa4.firebaseapp.com", projectId: "facebook-clone-43aa4", storageBucket: "facebook-clone-43aa4.appspot.com", messagingSenderId: "966828984493", appId: "1:966828984493:web:9a546c8c5f793afc6b9e24", }; const firebaseApp = initializeApp(firebaseConfig); const db = firebaseApp.firestore(); const auth = firebase.auth(); const provider = new firebase.auth.GoogleAuthProvider(); export default db; export { auth, provider };

the error i get is ./src/firebase.js Module not found: Can't resolve 'firebase' in 'D:\Coding\fb-clone\src'

Improve this question
2
  • Change the import to import firebase from "firebase/compat/app"; I'd recommend checking out the new Modular SDK. Commented Sep 3, 2021 at 18:01
  • @Dharmaraj i did that but now i have this × TypeError: firebase_compat_app__WEBPACK_IMPORTED_MODULE_0__.default.firestore is not a function Module.<anonymous> D:/Coding/fb-clone/src/firebase.js:12 9 | appId: "1:966828984493:web:9a546c8c5f793afc6b9e24", 10 | }; 11 | const firebaseApp = firebase.initializeApp(firebaseConfig); > 12 | const db = firebase.firestore(); 13 | const auth = firebase.auth(); 14 | const provider = new firebase.auth.GoogleAuthProvider(); Commented Sep 3, 2021 at 18:07

2 Answers 2

Reset to default
1

The following statement imports the core Firebase library which can be used with old name-spaced syntax:

import firebase from "firebase/compat/app";

Since you are using Firestore and Authentication as well, you would have to import those libraries too:

import firebase from "firebase/compat/app"; import "firebase/compat/auth" import "firebase/compat/firestore" // add these import ^^

Do checkout the new Modular SDK which has multiple benefits over the V8 SDK.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

I must say that @Dharmaraj’s response solved this same problem for me (Thanks).

Researching a bit, I can add that The new Firebase SDK v9.x is a transition to a modular approach, which has introduced important changes, then it has become incompatible with previous versions and causes the code used in v8.x to throw errors in the new Firebase v9.x SDK. (It should be noted that this is only a temporary release prior to v10 and v11).

Now, instead of importing the firebase namespace or the firebase/auth, we are importing and using individual functions. All detailed explanation here: https://blog.logrocket.com/refactor-react-app-firebase-v9-web-sdk/

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.