In Firebase I am getting an Uncaught TypeError: Cannot read property 'initializeApp' of undefined, but not sure why 'firebase' is not defined?

Question

here's my firebase import etc. in the config file, why would this be unable to recognise firebase?

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

const firebaseConfig = {
  apiKey: "XXX",
  authDomain: "XXX",
  projectId: "XXX",
  storageBucket: "XXX",
  messagingSenderId: "XXX",
  appId: "XXX",
  measurementId: "XXX"
}

//init firebase
firebase.initializeApp(firebaseConfig)

const projectAuth = firebase.auth()
const projectFirestore = firebase.firestore()
const timestamp = firebase.firestore.FieldValue.serverTimestamp

export { projectAuth, projectFirestore, timestamp }

Answer 1

If you have installed version 9.0.0 then you would have to use compat libraries to use the namespaced version:

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

Although I'd recommend using the new Modular syntax which is designed to facilitate tree-shaking (removal of unused code) to make your web app as small and fast as possible.

import { initializeApp } from "firebase/app"
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore"

const app = initializeApp(firebaseConfig)

const projectAuth = getAuth(app)
const projectFirestore = getFirestore(app)

export { projectAuth, projectFirestore }

You can find detailed information in the documentation