firebase' is not defined no-undef firebase error

Question

Can't use Firebase in react app, I installed Firebase using npm install firebase and created Firebase project. And I added the code provide by Firebase.

    // Import the functions you need from the SDKs you need
    import { initializeApp } from "firebase/app";
    // TODO: Add SDKs for Firebase products that you want to use
    // https://firebase.google.com/docs/web/setup#available-libraries
    
    // Your web app's Firebase configuration
    const firebaseConfig = {
      apiKey: "xxxxxx",
      authDomain: "xxxxx",
      projectId: "xxxx",
      storageBucket: "xxxx",
      messagingSenderId: "xxxx",
      appId: "xxxx"
    };
    
    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
    
    // export
    export const auth = firebase.auth();
    export const googleAuthProvider = new firebase.auth.GoogleAuthProvider();

then I used it in react component like below

    import {auth} from '../../firebase';

and it says can't compile like this

Answer 1

You are using the new Firebase Modular SDK which does not use firebase. namespace (same for importing AuthProviders). To initialize Firebase auth you must import getAuth() function from firebase/auth as shown below:

import { initializeApp } from "firebase/app"
import { getAuth, GoogleAuthProvider } from "firebase/auth"

const firebaseConfig = {...};
    
// Initialize Firebase
const app = initializeApp(firebaseConfig);
    
// export
export const auth = getAuth(app);
// initialize this way ^^^
export const googleAuthProvider = new GoogleAuthProvider();