CassieCodes
CassieCodes

Reputation: 57

React Firebase Integration - TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_0__.default is undefined

Stack Overflow! Long time no see.

I'm developing a web app with react where you can see definitions that I wrote in a firebase database for modern concepts, like typing quirks and plurality. When trying to implement my firebase firestore database in my app, it fails with the following error:

TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_0__.default is undefined.

Here is my code in firebase.js:

import firebase from "firebase/compat/app";
import "firebase/compat/firestore";

// For Firebase JS SDK v7.20.0 and later, measurementId is optional

const firebaseConfig = {

    apiKey: "dont-steal-my-db",
  
    authDomain: "please-respond",
  
    databaseURL: "https://definition-2d49c-default-rtdb.asia-southeast1.firebasedatabase.app",
  
    projectId: "definition-2d49c",
  
    storageBucket: "definition-2d49c.appspot.com",
  
    messagingSenderId: "404265179808",
  
    appId: "1:404265179808:web:10f7b7f917d695dabb87c5",
  
    measurementId: "G-SYN64MDXL1"
  
  };

  firebase.initializeApp(firebaseConfig);

  export default firebase;

How can I fix this error, and where is a good place to go in the future for problems with firebase like these?

Upvotes: 1

Views: 1032

Answers (1)

Achraf Lahcen
Achraf Lahcen

Reputation: 41

//try this :  

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

const firebaseConfig = {

apiKey: "dont-steal-my-db",

authDomain: "please-respond",

databaseURL: "https://definition-2d49c-default-rtdb.asia-southeast1.firebasedatabase.app",

projectId: "definition-2d49c",

storageBucket: "definition-2d49c.appspot.com",

messagingSenderId: "404265179808",

appId: "1:404265179808:web:10f7b7f917d695dabb87c5",

measurementId: "G-SYN64MDXL1"

};

const firebaseApp = firebase.initializeApp(firebaseConfig);
export const db = firebaseApp.firestore();

Upvotes: 1

Related Questions