Question

对于我的Nuxt/Vue.js应用，我需要导出与Firestore相关的各种与firebase.firestore()相关的元素。

但是我在默认导出中遇到了Firebase App named '[DEFAULT]' already exists (app/duplicate-app)错误，但我不明白为什么：

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

在此导出默认行中没有可识别的重复项，那怎么了？

Answer 1

您无需导出firebaseApp，这应该已经足够了

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

这应该避免多次调用实例化

Answer 2

我处理它的方式是有一个firedb文件，可以根据需要（整个应用程序或仅在Vuex中）导入该文件。由于该文件不断被引用，因此配置会继续重新加载，从而导致相同的错误。

我在配置定义后添加此行的处理方式

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

我在https://codesandbox.io/s/vuex-ws-2-60fzg的condesandbox中有一个示例

使用您的代码会更加困难，因为您要导出 firebaseApp常量。但这可能对您有用（未经测试）

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

Answer 3

您可以检查firebase.apps以查看其是否已加载。如果只加载一次，则只需检查长度即可。如果您有多个，则可以检查每个应用程序的名称。

//配置文件

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

如果您使用的是Firestore，请使用：

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

Answer 4

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

Answer 5

这对我有用

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

导出const auth = app.auth() 导出默认应用；

Answer 6

这是我的解决方案 reactjs

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

Firebase：名为“ [DEFAULT]”的Firebase应用已存在（应用/重复应用）

6 个答案: