Next.js: '[DEFAULT]'という名前のFirebaseアプリは既に存在します（app / duplicate-app）

firebase.appsをチェックして、ロードされているかどうかを確認できます。 一度だけロードする場合は、長さを確認するだけです。 複数ある場合は、各アプリの名前を確認できます。

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

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

ソリューション：

`「firebase」からfirebaseをインポートする

試す {
firebase.initializeApp（{
databaseURL： 'dfgdfg'
}）
} catch（err）{
//「すでに存在します」というメッセージをスキップします
//ホットリロード中の実際のエラーではありません
if（！/すでに存在します/.test(err.message））{
console.error（ 'Firebase初期化エラー'、err.stack）
}
}

const fb = firebase
デフォルトのfb`をエクスポート

この問題は、firebaseのinitializeメソッドを複数回呼び出すことが原因です。 私はこれと同じ問題を抱えていました。 そして、initializeメソッドの呼び出しを複数回制限することで修正できます。 1つのクラスでFirebase構成を作成し、シングルトンクラスとして作成します。

私はfirebaseと最近のWeb開発者に不慣れです。 この問題が発生しました。 私の問題は、私のjavascriptファイルを私のhtmlファイルの先頭と本文の両方にリンクすることによって引き起こされました。 具体的には、htmlヘッドにfirebaseとjsスクリプトタグの両方があり、bodyタグの最後に別のjsスクリプトタグがあります。 私の修正は、頭からすべてのスクリプトタグを削除し、それらを本文の下部に配置することでした。

それが私の解決策です：

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

素晴らしい解決策！ @Purii

@Puriiあなたは私の日を救った

ファイヤーストアを使用する場合は、以下を使用してください。

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

@jideありがとう

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と@jide 、ソリューションに感謝します