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環境では動かないことがあります。 - ファイルが存在しているか確認
→ そもそもそのファイルを作成し忘れていないかをチェックしてください。
まとめ
ReactとFirebaseを連携させる際に発生する Module not found: Can't resolve エラーは、ファイル名の不一致が原因であることが多いです。
特に今回のケースでは、import文の指定ファイル名（firebase-config）と、実際のファイル名（firebase.js）が異なっていたことが原因でした。
基本的なことではありますが、エラーメッセージの内容を読み解き、正確にファイル名を一致させることで、簡単に解消できます。
スクールの紹介
ここまで読んでいただきありがとうございました。
最後に宣伝をさせてください。
技術で未来を切り拓く―あなたの夢を現実にするプログラミングスクール
Webデザインやプログラミングで成功を目指している方々にとって、このオンラインスクールは夢を叶えるための最適な場所です。皆さんのキャリアを次の段階へと引き上げるためにデザインされたこのスクールは、一人ひとりの成功を心から願い、それを実現するための全てを提供しています。ここでは、このスクールの魅力について詳しくご紹介します。
◆圧倒的な費用対効果
このオンラインプログラミングスクールは、Web系教育において最高の費用対効果を提供しています。多くの高額スクールが存在する中で、ここではリーズナブルな価格で、質の高い教材、無限のサポート、そして実際に市場で求められるスキルの習得機会を提供しています。
◆現役フリーランスの講師陣
講師たちは全員、現役のフリーランスプロフェッショナルです。市場で活躍している講師から直接、最新のトレンドや実践的なスキルを学べるのは、このスクールの大きな特徴です。
◆柔軟な学習コース
固定のコースがなく、学習者の興味やニーズに応じて自由に学習できます。進路変更も自由で、最低契約期間は1ヶ月という柔軟性を持っています。自分のペースで、自分に合った学習が可能です。
◆無制限の添削とサポート
理解できるまで、そして満足するまで、無制限に添削と質問への回答を提供しています。進路相談や技術面以外の相談にも対応しており、全面的にサポートします。
◆社長から学べる貴重な機会
デザイナー、プログラマー、ディレクター、マーケターとして豊富な経験を持つ社長から直接学べるのも、このスクールの特別な点です。他のスクールでは得られない、貴重な機会です。
◆実績作りへの徹底的なサポート
就職、転職、フリーランスとして成功するためには、高品質な実績が必要です。生徒の作品レベルを最大限に高め、市場で求められる実績を作り上げることに力を入れています。案件を取得できない生徒には、直接案件を提供することもあります。
◆メッセージからの約束
高額な授業料を支払わせて結果を出せないスクールとは違い、物理的なサポートは提供できないかもしれませんが、継続的な努力を通じて最高の結果を出せるようにサポートします。一緒に不正なスクールを撲滅し、あなたの夢を実現しましょう。
このプログラミングスクールは、Webデザインやプログラミングでの成功を目指す方々に必要な全てを備えています。今こそ、このコミュニティに参加し、あなたのキャリアを加速させる時です。
詳しくはこちら↓
