はじめに
今回、Next.jsを使用しVercelでデプロイしようとした際、ローカルでは普通に動いているのに、vercelにデプロイするとエラーが発生するという現象に遭遇いたしました。
結果として原因解決をしましたので、同じ状況で困ってしまう方のために記事を残そうと思います。
実際に起きたエラー
私のエラーコードの抜粋ではありますが、vercel上にこのようなエラーメッセージが表示されました。
Module not found: Can't resolve './qiitacms'
> 1 | import QiitaListCMS from "./qiitacms";
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 |
3 | const page = () => {
4 | return (
原因
結論から言うとファイル名の大文字、小文字の不一致が原因のエラーでした。
そうなれば、ファイル名を統一するように変更すればいいだけの話でしたが、なぜかVercel上でデプロイが成功しません。💦
GitHubを確認してみると変更したはずのファイル名が変更されておりません、。
commitをしpushもしましたが、なぜか変更が反映されておらず、、。
調べてみると windows や macOS は「大文字・小文字を区別しない」ファイルシステムのため、
ファイル名を変更しても Git がその変更を認識しなかったのです。
解決方法
Git に「大文字小文字の変更があった」と明確に認識させる必要があります。
そのためには一度別名にリネームしてから、目的の名前に戻します。
例えば、ファイル名を一旦「Fake」ファイルとし、GitHubに反映させます。その後、もともと設定していたファイル名にしGitHubへ反映させることにより解決いたしました。
おわりに
今回のエラーは目に見えない部分から始まりましたので、原因を特定するのに時間がかかってしまいました。
vercelがGitHubのコードを参照して動いていることは理解していましたが、ファイル名を変更していたことだけに注視しすぎて、git上のファイル名の小文字、大文字の違いに気付くのが遅れてしまいました。原因究明の方法はいろいろありますが、大本を見返すことをおろそかにしないようこれからも頑張ります。💦
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！
▼▼▼