Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined... issue

Question

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

const firebaseConfig = {
  apiKey: "XXXX",
  authDomain: "YYYY.firebaseapp.com",
  projectId: "YYYY",
  storageBucket: "YYYY.appspot.com",
  messagingSenderId: "XXXX",
  appId: "XXXX",
};



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 };

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Answer 1

That seems like an older version of firebase you should keep up to date with firebase documentation

Also this worked for me :

import {
  GoogleAuthProvider,
  getAuth,
} from "firebase/auth";
import {
  getFirestore,
} from "firebase/firestore";

const firebaseConfig = {
    
  };

  const app = initializeApp(firebaseConfig);
  const auth = getAuth(app);
  const db = getFirestore(app);
  const googleProvider = new GoogleAuthProvider();
  
  export {auth , db, googleProvider};