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

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