Question

我开始了一个基于https://github.com/zeit/next.js/tree/v3-beta/examples/with-firebase

的项目

在多个组件中导入firebase时出现的错误。

在此firebase启动文件中：

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

然后在组件中：

import firebase from '../lib/firebaseClient'

使用单个组件效果很好，但如果我添加一个新组件：

import firebase from '../lib/firebaseClient'

应用程序失败：

Firebase：名为＆＃39; [DEFAULT]的Firebase应用程序＆＃39;已存在（app / duplicate-app）。 FirebaseError：Firebase：名为＆＃39; [DEFAULT]的Firebase应用程序＆＃39;已经存在（app / duplicate-app）。

Answer 1

我有同样的问题，然后我发现了这个：

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

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

Answer 2

解决方案：

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

我的理解是错误是由于为数据库多次调用initializeApp（）。扫描您的代码以确保您只调用一次initializeApp（）。对我来说，这包括检查可能正在调用方法的任何js文件，并检查html文件中的重复js文件。

我最近在自己的代码中解决了这个错误。我的问题是由于在我的html文件的头部和正文中意外链接我的javascript文件（调用initializeApp（））引起的。我的修复是删除我的html文件头部中的重复javascript标记，因此只有一个存在于正文中。

Answer 4

在服务器端类似的东西应该起作用

string name;
std::cin>>name;

if(std::isupper(name[0]))
{
std::cout<<"Upper case"<<std::endl;
}
else
{
std::cout<<"Lower case"<<std::endl;
}

Answer 5

总结所有好的答案。更好的解决方法是将环境变量从 .env.local 加载到 process.env。

//.env.local
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=

接下来，我们可以像这样在客户端初始化 Firebase SDK。

//shared/configs/firebase.js
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

const clientCredentials = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

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

export default firebase;

最后，将 Firebase deps 导入其他文件。

//pages/index.js
import firebase from '../shared/configs/firebase';

Answer 6

所以我遇到了这个问题，因为 Next 的热重载的某些方面。我使用如下代码来确保我不会多次调用 initializeApp：

export let adminClient;
adminClient = adminClient || admin.initializeApp({...});

这不起作用，因为热重载似乎正在清除 adminClient，所以我一直尝试调用 initializeApp，即使 firebase 仍将应用记录为正在初始化。

为了解决这个问题，我使用了以下代码段：

const getAppInstance = () => {
    if (admin.apps.length) {
        return admin.apps[0];
    } else {
        return initApp();
    }
}

export const adminClient = getAppInstance();

适用于全新的服务器启动，或由于开发中的代码更改而热重载。

React NextJS Firebase错误刷新名为＆＃39; [DEFAULT]＆＃39;的Firebase应用程序已经存在

6 个答案: