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

You can check firebase.apps to see if its loaded. If your only loading it once, then you can just check the length. If you have multiple then you could check each apps name.

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

http://stackoverflow.com/questions/37652328/how-to-check-if-a-firebase-app-is-already-initialized-on-android

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 fb= firebase
export default fb`

the issue is due to calling the initialize method of firebase more than multiple times . me had this same issue . and i could fix it by restricting the initialize method call more than once . make the firebase configurations in one class and make it as singleton class .

I am new to firebase and a recent web developer. I had this issue. My issue was caused by linking my javascript file in both the head and in the body of my html file. I specifically had both firebase and js script tags in the html head and another js script tag at the end of the body tag. My fix was to delete all script tags from the head and put them at the bottom of the body.

That's my solution:

// Config file
import * as firebase from "firebase";

const config = {...};

export default !firebase.apps.length ? firebase.initializeApp(config) : firebase.app();

// Other file
import firebase from '../firebase';
...
console.log(firebase.name);
console.log(firebase.database());

Brilliant solution! @Purii

@Purii You just saved my day

If you use firestore, use :

export default !firebase.apps.length
  ? firebase.initializeApp(config).firestore()
  : firebase.app().firestore();

@jide thanks

I had to also include import 'firebase/firestore';

import * as firebase from 'firebase'
import 'firebase/firestore';

const config = {
  apiKey: "***",
  authDomain: "***",
  databaseURL: "***",
  projectId: "***",
  storageBucket: "***",
  messagingSenderId: "***"
};

export default !firebase.apps.length 
  ? firebase.initializeApp(config).firestore()
  : firebase.app().firestore();

@Purii and @jide , thanks for the solutions