FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created (on NextJS) - firebase

Question

While trying to integrate Firebase auth with my project, I encountered this error:
FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
at app (/Volumes/MacOS/Projects/Projects/3. PriceTag/pricetag/node_modules/#firebase/app/dist/index.node.cjs.js:356:33)
at Object.serviceNamespace [as auth] (/Volumes/MacOS/Projects/Projects/3. PriceTag/pricetag/node_modules/#firebase/app/dist/index.node.cjs.js:406:51)
at eval (webpack-internal:///./lib/firebase.js:28:66)
at Object../lib/firebase.js (/Volumes/MacOS/Projects/Projects/3. PriceTag/pricetag/.next/server/pages/enter.js:22:1)
at __webpack_require__ (/Volumes/MacOS/Projects/Projects/3. PriceTag/pricetag/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///./pages/enter.js:7:71)
at Object../pages/enter.js (/Volumes/MacOS/Projects/Projects/3. PriceTag/pricetag/.next/server/pages/enter.js:33:1)
at __webpack_require__ (/Volumes/MacOS/Projects/Projects/3. PriceTag/pricetag/.next/server/webpack-runtime.js:33:42)
at __webpack_exec__ (/Volumes/MacOS/Projects/Projects/3. PriceTag/pricetag/.next/server/pages/enter.js:87:52)
at /Volumes/MacOS/Projects/Projects/3. PriceTag/pricetag/.next/server/pages/enter.js:88:28
at Object.<anonymous> (/Volumes/MacOS/Projects/Projects/3. PriceTag/pricetag/.next/server/pages/enter.js:91:3)
at Module._compile (internal/modules/cjs/loader.js:1133:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10)
at Module.load (internal/modules/cjs/loader.js:977:32)
at Function.Module._load (internal/modules/cjs/loader.js:877:14)
at Module.require (internal/modules/cjs/loader.js:1019:19) {
code: 'app/no-app',
customData: { appName: '[DEFAULT]' }
I get this error whenever I request localhost:3000/enter
Here's the Javascript code:
firebase.js
import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'
var firebaseConfig = {
apiKey: process.env.FIREBASE_API_KEY,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
projectId: process.env.FIREBASE_PROJECT_ID,
storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.FIREBASE_APP_ID
};
if (!firebase.app.length) {
firebase.initializeApp(firebaseConfig)
}
export const auth = firebase.auth()
export const googleAuthProvider = new firebase.auth.GoogleAuthProvider()
enter.js
import { auth, googleAuthProvider } from '../lib/firebase'
export default function SignInPage() {
return (
<>
<SignInButton />
</>
)
}
// Google Sign In Component
const SignInButton = () => {
const signInWithGoogle = async () => {
await auth.signInWithPopup(googleAuthProvider)
}
return (
<button onClick={signInWithGoogle}>Sign in with Google</button>
)
}
// Sign Out Button component
export const SignOutButton = () => {
return (
<button onClick={() => auth.signOut}>Sign in with Google</button>
)
}
I can't seem to figure out what's causing the error. I did initialise a firebase app, so I'm not sure what's happening here.

Answer 1

With NextJs automatic code splitting, you never know what it is cutting out. I think NextJs is looking at your firebase.js and just including what you used:
import firebase from 'firebase/app'
export const auth = firebase.auth()
export const googleAuthProvider = new firebase.auth.GoogleAuthProvider()
I would just check if firebase is setup every time you use it.
Firebase Web V9
import { getApp as _getApp, getApps, initializeApp } from "firebase/app";
import { getAuth as _getAuth } from "firebase/auth";
import { enableIndexedDbPersistence, getFirestore as _getFirestore } from "firebase/firestore";
const config = {
apiKey: process.env.FIREBASE_API_KEY,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.FIREBASE_DATABASE_URL,
projectId: process.env.FIREBASE_PROJECT_ID,
storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.FIREBASE_APP_ID,
};
const firebaseIsRunning = () => !!(getApps().length);
export function getApp() {
if (!firebaseIsRunning()) initializeApp(config);
return _getApp();
}
export function getFirestore() {
const isRunning = firebaseIsRunning();
if (!isRunning) getApp();
const db = _getFirestore();
if (!isRunning)
if (typeof window !== undefined) enableIndexedDbPersistence(db)
return db;
}
export function getAuth() {
if (!firebaseIsRunning()) getApp();
return _getAuth();
}

Answer 2

for anybody that is using firebase V9. This is what you need to do.
import { initializeApp } from 'firebase/app';
import { getFirestore } from "firebase/firestore";
const clientCredentials = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};
const app = initializeApp(firebaseConfig);
const firestore = getFirestore();
export { firestore }
and you should be fine