🔥

Firebase App named '[DEFAULT]' already exists with different... の対処法

2022/08/25に公開

Firebase

Firebaseを使用していると

というエラーに遭遇してハマりかけたので対処法をここに残しておきます。

何が起きている？

エラーが出た時はVue3でVue routerを使ってウェブアプリを作成していたのですが、ログインしていないユーザーに表示される"welcome.vue"というファイルとログインしているユーザーに表示される"app.vue"というファイルの二つでそれぞれfirebaseConfigを設定していました。

このとき、firebaseConfigは内容が全く同じだと何もエラーが起きないのですが、firebaseConfigの内容が少しでも違うと新しいFirebase Appを作成したことになってしまうためこのようなエラーが発生しました。

対処法

firebaseConfigをそれぞれのファイルでそろえればいいだけです。
しかしながら全部のファイルでfirebaseConfigをそれぞれ書き換えるのは面倒なのでfirebaseConfigをモジュール化しました。

//welcome.vue
//firebaseConfigを取得する側
<template>...</template>
<script>
import { initializeApp, getApps } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { firebaseConfig } from "../data/firebaseConfig.js"//これがfirebaseConfigのモジュール

const firebaseApp = initializeApp(firebaseConfig);
const analytics = getAnalytics(firebaseApp);
</script>

//data/firebaseConfig.js
export const firebaseConfig = {
	apiKey:***
	authDomain:***
	databaseURL:***
	projectId:***
	storageBucket:***
	messagingSenderId:***
	appId:***
	measurementId:***
}

このようにすれば全ファイルのfirebaseConfigをそれぞれ編集することなく一括で編集することができるようになります。

何が起きている？

対処法

Discussion