CODEWITHSUNDEEP
firebasevue.jsgoogle-cloud-firestorenuxt.js
drake035
drake035

Reputation: 2897

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

For my Nuxt/Vue.js app I need to export various Firestore-related elements as opposed to just firebase.firestore().

However I'm getting some Firebase App named '[DEFAULT]' already exists (app/duplicate-app) error for the default export and I don't understand why:

import firebase from 'firebase/app'
import 'firebase/firestore'
const config = {
  apiKey: '...',
  authDomain: '...',
  databaseURL: '...',
  projectId: '...',
  storageBucket: '...',
  messagingSenderId: '...'
}
const firebaseApp = firebase.initializeApp(config)
firebase.firestore().settings({ experimentalForceLongPolling: false })
const db = firebase.firestore()
const fb = firebase
export { db, fb }
export default firebaseApp

There is no duplicate that I can identify in this export default line, so what's wrong?

Upvotes: 4

Views: 7008

Answers (6)

Ayoub Aarab
Ayoub Aarab

Reputation: 67

this my solution in my case reactjs

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

Upvotes: 0

Brandon Stewart
Brandon Stewart

Reputation: 743

this worked for me

const app = !firebase.apps.length ? firebase.initializeApp(info) : firebase.app();

export const auth = app.auth() export default app;

Upvotes: 0

Ravi Verma
Ravi Verma

Reputation: 1

import firebase from 'firebase/app'
import 'firebase/firestore'

const config = {
  apiKey: '...',
  authDomain: '...',
  databaseURL: '...',
  projectId: '...',
  storageBucket: '...',
  messagingSenderId: '...'
}
if (!firebase.apps.length) {
    firebase.initializeApp(config)
}
//by commenting this i got my result
// firebase.firestore.settings({ experimentalForceLongPolling: false })
const db = firebase.firestore()
export { db }
export default firebase

Upvotes: 0

Chanaka Weerasinghe
Chanaka Weerasinghe

Reputation: 5742

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.

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

If you use firestore, use :

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

Upvotes: 2

Daniel
Daniel

Reputation: 35724

The way I handle it is I have a firedb file that I import as needed (throughout the App or just in Vuex). Because the file keeps getting referenced, the config keeps re-loading, which causes the same error.

The way I've dealt with it to add this line after the config definition

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

I've got an example in condesandbox at https://codesandbox.io/s/vuex-ws-2-60fzg

With your code it would be a little more difficult, since you're exporting the firebaseAppconst. But this may work for you (not tested)

import firebase from 'firebase/app'
import 'firebase/firestore'
const config = {
  apiKey: '...',
  authDomain: '...',
  databaseURL: '...',
  projectId: '...',
  storageBucket: '...',
  messagingSenderId: '...'
}
const firebaseApp = firebase.apps && firebase.apps.length > 0 ? firebase.apps[0] : firebase.initializeApp(config)

firebase.firestore().settings({ experimentalForceLongPolling: false })
const db = firebase.firestore()
const fb = firebase
export { db, fb }
export default firebaseApp

Upvotes: 5

andresmijares
andresmijares

Reputation: 3744

You dont need to export the firebaseApp, this should be good enough 

import firebase from 'firebase/app'
import 'firebase/firestore'

const config = {
  apiKey: '...',
  authDomain: '...',
  databaseURL: '...',
  projectId: '...',
  storageBucket: '...',
  messagingSenderId: '...'
}
if (!firebase.apps.length) {
    firebase.initializeApp(config)
}
firebase.firestore.settings({ experimentalForceLongPolling: false })
const db = firebase.firestore()
export { db }
export default firebase

This should avoid calling the instantiation more than once

Upvotes: 0

Related Questions