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

[martinvarelaaaa]

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).

[kennylavender]

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

[martinvarelaaaa]

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`

[AnsarSamad]

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 .

[gitKendra]

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.

[Purii]

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

[kylops]

Brilliant solution! @Purii

[francisribeiro]

@Purii You just saved my day

[jide]

If you use firestore, use :

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

[isaacabdel]

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

[brunokiafuka]

@Purii and @jide , thanks for the solutions