【React × Firebase】「Module not found: Can’t resolve ‘./firebase-config’」エラーの原因と対処法

2023年11月8日2025年12月24日

ReactでFirebaseのデータベースと連携しようとしたとき、次のようなエラーメッセージが表示されることがあります。

ERROR in ./src/App.js 8:0-35
Module not found: Error: Can't resolve './firebase-config' in 'C:\Users\〇〇\make-login-form\src'

このエラーの意味と、解決方法についてご紹介いたします。

エラーの内容

このエラーは、App.js ファイルの中で以下のような記述をしているにもかかわらず…

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import firebaseConfig from "./firebase-config"; // ← この行

実際には firebase-config.js というファイルが src/ ディレクトリ内に存在しないために発生しています。

つまり、指定されたファイルが見つからないという単純なエラーです。

原因：ファイル名の不一致

私のケースでは、実際に作成していたファイル名が firebase.js であり、firebase-config.js ではありませんでした。

そのため、以下のように修正することでエラーが解消されました。

- import firebaseConfig from "./firebase-config";
+ import firebaseConfig from "./firebase";

ファイル名のスペルや拡張子が正しく一致していないと、React（正確にはwebpack）がモジュールを読み込めず、上記のようなエラーを出力します。

よくある原因一覧

このエラーの原因としてよくあるのは以下の通りです。

原因	内容
ファイル名のスペルミス	例: `firebaseConfig.js` と書いたが、ファイル名は `firebase-config.js`
拡張子の省略ミス	`.js` を忘れたり、逆に明示したことで誤解釈されることがあります
ファイルの場所が違う	`./firebase-config` としたが、実際には `./config/firebase-config.js` にある等

対処方法

エラーメッセージの中のパスを確認
　→ Can't resolve './firebase-config' in 'C:\...\src' と出ている場合、src フォルダ直下に該当ファイルが存在しているかを確認してください。
ファイル名とimport文が一致しているかを確認
　→ 大文字・小文字も区別されます。Windowsでは動作しても、Linux環境では動かないことがあります。
ファイルが存在しているか確認
　→ そもそもそのファイルを作成し忘れていないかをチェックしてください。