【React】「Firebase App named ‘[DEFAULT]’ already exists」エラーの解消法

React × Firebaseで「Firebase App named ‘[DEFAULT]’ already exists with different options or config (app/duplicate-app)」というエラーが発生しました。

ちょっと前でしたら「Firebaseで「Firebase App named ‘[DEFAULT]’ already exists」というエラーがでた」のやり方で回避できたんですが、Firebaseバージョン9になってから初期化の方法が変わり、この方法では回避できなくなりました。

試行錯誤した結果、一応下記のやり方で回避できました。

import { initializeApp, getApps} from "firebase/app";
import { getFirestore, collection, addDoc } from "firebase/firestore";

const firebaseConfig = {
  projectId: process.env.REACT_APP_PROJECT_ID,
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
);

// Initialize Firebase
if (!getApps().length) {
  const app = initializeApp(firebaseConfig);
}

const db = getFirestore();

function App() {
  return (
    <h1>エラー回避</h1>
  );
}

export default App;

↓↓「にほんブログ村」のランキングに参加しています。少しでも面白い、参考になったとか思われたらポチッとしていただけると嬉しいです！

にほんブログ村