ReactでFirebaseを導入した際、コンソールに以下のようなエラーが表示されて画面が真っ白になってしまったことはありませんか？
Firebase: No Firebase App '[DEFAULT]' has been created - call initializeApp() first (app/no-app).
このエラーは直訳すると「Firebaseの初期化（initializeApp）がされていません」という意味ですが、「コードにはちゃんと書いているのに直らない！」と泥沼にハマってしまう人が多い落とし穴です。
結論から言うと、原因の多くは「環境変数（.env）の設定漏れや読み込み失敗」にあります。
この記事では、このエラーの原因と、React環境（Vite / Create React App）ごとの正しい解決手順を分かりやすく解説します。
エラーが起きる根本的な原因
このエラーが出る根本的な理由は、Firebaseの機能（FirestoreやAuthなど）を呼び出す時点で、Firebase自体が正しく初期化（Initialize）できていないからです。
コードに initializeApp(firebaseConfig) と書いていてもエラーが出る場合、firebaseConfig の中身（APIキーなど）が undefined（空っぽ） になっている可能性が極めて高いです。
特に、「開発環境や本番環境に合わせて環境変数（.env）を分けたタイミング」でこのエラーが頻発します。
【解決策】Reactでの環境変数の正しい設定手順
Reactで環境変数を扱う場合、使っているビルドツール（Vite または Create React App）によって特有のルール（プレフィックス）があります。このルールを破っていると、環境変数はブラウザに読み込まれず undefined になってしまいます。
ご自身の環境に合わせて、以下の設定を見直してみてください。
1. Vite を使っている場合
Viteでは、環境変数の頭に VITE_ をつける必要があります。
❌ 間違った設定（読み込まれません）
コード スニペット
FIREBASE_API_KEY=your_api_key_here
⭕ 正しい設定（.env）
コード スニペット
VITE_FIREBASE_API_KEY=your_api_key_here
VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain_here
JS/TSコードでの呼び出し方： Viteでは process.env ではなく import.meta.env を使用します。
JavaScript
const firebaseConfig = {
apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
// ...他の設定
};
2. Create React App (CRA) を使っている場合（H3）
Create React Appでは、環境変数の頭に REACT_APP_ をつける必要があります。
⭕ 正しい設定（.env）
コード スニペット
REACT_APP_FIREBASE_API_KEY=your_api_key_here
REACT_APP_FIREBASE_AUTH_DOMAIN=your_auth_domain_here
JS/TSコードでの呼び出し方： CRAでは process.env を使用します。
JavaScript
const firebaseConfig = {
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
// ...他の設定
};
⚠️ 注意：.envを変更したら必ず「再起動」
.envファイルを書き換えた後は、ローカルサーバー（npm run devやnpm start）を一度停止し、再起動しないと値が反映されません。
再発を防ぐ！おすすめのデバッグ手法
今後、環境変数の設定を忘れたときに「原因不明のエラー」で時間を溶かさないために、Firebaseの初期化直前にチェック処理（バリデーション）を入れておくのがおすすめです。
以下のように設定ファイル（firebase.jsなど）に1行追加してみましょう。
JavaScript
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
const firebaseConfig = {
apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
// ...他の設定
};
// 💡 早期リターンで環境変数の未設定を検知する
if (!firebaseConfig.apiKey) {
throw new Error("❌ Firebaseの環境変数が設定されていません。.envファイルを確認してください。");
}
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
こうしておけば、万が一環境変数が読み込めていない場合に、コンソールにピンポイントで「.envファイルを確認してください」と表示されるため、一瞬で原因に気づくことができます。
まとめ
Firebaseの (app/no-app) エラーが出たときは、以下の3点をチェックしましょう。
.envの変数名にVITE_やREACT_APP_のプレフィックスがついているか- コード側での呼び出し方（
import.meta.envまたはprocess.env）が合っているか .envを書き換えた後にローカルサーバーを再起動したか
環境変数の分け方を工夫した直後は、うっかり設定を忘れがちです。この記事がデバッグの参考になれば幸いです！
コメント