Recently, I've been encountering an issue while attempting to incorporate firebase v9 into my Next.js project. Every time I import it, it returns as undefined...
import * as firebase from 'firebase/app'
export function getFirebaseApp() {
const clientCredentials = { ... }
return firebase.initializeApp(clientCredentials)
}
When trying to execute this in the browser, an error message pops up:
TypeError: Cannot read property 'initializeApp' of undefined
This problem persists regardless of the different import variations I have attempted:
import * as firebase from 'firebase/app'
import firebase from 'firebase/app'
import { initializeApp } from 'firebase/app'
// I even tried importing from '@firebase/app', but no luck
I'm honestly stumped by this situation. It doesn't seem to be related to Next.js because not even VSCode suggests importing anything from firebase, despite it being installed (visible in node_modules). Here is my package.json entry:
{
"dependencies": {
"firebase": "^9.0.2"
}
}
This mystery baffles me. Any advice on how to resolve this issue would be greatly appreciated.
UPDATE: In response to suggestions from comments, I did attempt using the modular SDK approach by directly importing initializeApp, but unfortunately, it didn't work either:
import { initializeApp } from 'firebase/app'
export function getFirebaseApp() {
const clientCredentials = { ... }
return initializeApp(clientCredentials)
}
TypeError: Cannot read properties of undefined (reading 'initializeApp')