TypeError: Cannot read property 'length' of undefined - Firebase

Question

I am trying to connect to Firebase.

Code from firebase.js:

import * as firebase from "firebase/compat/app";

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

const app = !firebase.apps.length
  ? firebase.initializeApp(firebaseConfig)
  : firebase.app();

const db = app.firestore();
const auth = app.auth();
const provider = new firebase.auth.GoogleAuthProvider();

export { db, auth, provider };

Answer 1

As I said in my comment on your other thread, firebase imports have changed recently. Try to change fribase to firebase/compat/app Documentation

Answer 2

You're missing imports for Firestore (as the error mentions) and Authentication.

import * as firebase from "firebase/compat/app";
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

Also see the documentation on updating imports to v9 compat .

Answer 3

Just coming across this, I hope this solution helps:
simply upgrade "firebase" to version: "^9.4.0"

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getAuth, GoogleAuthProvider } from 'firebase/auth'

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

const app = initializeApp(firebaseConfig);

const db = getFirestore(app);//access to the database
const auth = getAuth(); //access to the authentication
const provider = new GoogleAuthProvider(); //access tp the provider

export { db, auth, provider };