問題:ファイルが存在するにもかかわらず Module not found
ある日、作業を完了して変更をマージしていたところ、
Vercelのデプロイが失敗しました。
Failed to compile.
./src/components/admin/AttendanceView/AttendanceTablePersonal.tsx
Module not found: Can't resolve '@/stores/admin/attendanceTablePersonalSlice'
ログを確認すると、Module not found エラーが発生し、
attendanceTablePersonalSlice が見つからないとのこと。
しかし、ファイルは確かに存在し、ローカル環境での npm run build ではエラーは出ません。
何が原因だったのでしょうか?
原因: ファイル名の大文字を小文字に変更した (Gitの設定とファイルシステムの大文字・小文字の扱い)
原因は、ファイル名の大文字を小文字を変更した際に、Gitがその変更を正しく検知していなかったことです。
これにより、削除されているファイルを参照したためエラーとなりました。
Gitが大文字と小文字を区別するかどうかは、WinやMacなど大抵のケースでは大文字小文字を区別せず、Linuxなどの一部環境ではデフォルトで区別しているようです。
以下Windowsの例となります。
mkdir git-case-test
cd git-case-test
git init
echo "sample" > Sample.txt
git add Sample.txt
git commit -m "Add Sample.txt"
例えば上記コマンドでリポジトリを作成し、Sample.txtをコミット。
mv Sample.txt sample.txt
git status
Sampleをsampleに変更し、git statusで確認しても
On branch master
nothing to commit, working tree clean
変更を検知していません。
git config core.ignorecase false
git status
そこで大文字小文字を区別するようにGitの設定を変更すると
On branch master
Changes not staged for commit:
(use "git add/rm <file>..." to update what will be committed)
(use "git restore <file>..." to discard changes in working directory)
deleted: Sample.txt
Untracked files:
(use "git add <file>..." to include in what will be committed)
sample.txt
正しく検出することができました。
解決策1: Gitのオプションで大文字小文字を区別させる
git config core.ignorecase false
再現例の通り、上記コマンドによって大文字小文字を区別する方法です。
解決策2: ファイル名を一旦別名に変更してコミットする
今回のケースではファイル名を一時的に別名に変更してからコミットすることで対処しました。
理由としては先述のコマンドはローカルリポジトリでのみ有効となるため、
開発環境の差が生まれることを懸念したためです。
参考
Microsoft公式ドキュメント
Macユーザーの例