React NextJS Firebase error refresh Firebase App named '[DEFAULT]' already exists

Question

I started a project based on https://github.com/zeit/next.js/tree/v3-beta/examples/with-firebase

The error I have when importing firebase in more than one component.

In this firebase start file:

import firebase from 'firebase'
const firebaseConfig = {
  apiKey: "fdsfsdfdsf",
  authDomain: "fdsfdsfsdfdsf",
  databaseURL: "sdfdsfdsf",
  projectId: "dsfdsfdsf",
  storageBucket: "dsfdsfdsf",
  messagingSenderId: "dsfdsfsdfdsf"
}

const FbApp = firebase.initializeApp(firebaseConfig)

export default FbApp.auth()`

Then in the components:

import firebase from '../lib/firebaseClient'

With a single component works well, but if I add a new component with:

import firebase from '../lib/firebaseClient' 

The application fail:

Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app). FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).

Answer 1

I had same issue, then I found out this:

if (!firebase.apps.length) {
  firebase.initializeApp({});
}

https://github.com/zeit/next.js/issues/1999

Answer 2

The solution:

import firebase from 'firebase'

try {
  firebase.initializeApp({
    databaseURL: 'dfgdfg'
  })
} catch (err) {
  // we skip the "already exists" message which is
  // not an actual error when we're hot-reloading
  if (!/already exists/.test(err.message)) {
    console.error('Firebase initialization error', err.stack)
  }
}

const auth = firebase.auth()
export default auth

Answer 3

My understanding is that the error is due to calling initializeApp() more than once for your database. Scan through your code to make sure you only call initializeApp() once. For me, this included checking any js files that might be calling the method and checking for duplicate js files in your html file.

I recently solved this error in my own code. My issue was caused by accidentally linking my javascript file, which calls initializeApp(), in the head and in the body of my html file. My fix was to delete the duplicate javascript tag in the head of my html file so only one existed in the body.