はじめに

Next.js × TypeScript で開発中のアプリを Vercel にデプロイしようとしたところ、ローカル（Windows）ではビルド成功、Vercel では失敗という現象に遭遇しました。

結論から言うと、エラーの原因は Git が大文字・小文字だけのファイル名の変更を検出してくれなかったことでした。

発生したエラー

Vercel のデプロイログに以下のようなエラーが出力されていました。

bash

Module not found: Can't resolve '@/components/header'

✅ 　ファイル名を間違えていないか（大文字・小文字の違いはないか）
✅ 　 import のパスを間違えていないか
✅ 　ローカル環境ではビルドできている

「合っているはず...」と思いつつ、思い当たることが一つ。
直前にファイル名を大文字から小文字に変更していたことを思い出し、そこが怪しいと考えました。

✅ ファイル名を変更したつもりだった

❌ Git は変更を検知していなかった

Windows はデフォルトで大文字・小文字を区別しないファイルシステム（NTFS など）
Git も「変更なし」と判断して差分を記録せず
　 ⇒ Vercel（Linux・大文字小文字を区別する環境）では Header.tsx を読み込もうとしてビルドエラーに

ちゃんとファイル名の変更を Git に認識させる

bash

git mv src/components/Header.tsx src/components/Header_temp.tsx

bash

git mv src/components/Header_temp.tsx src/components/header.tsx

Git には core.ignorecase という設定があり、これを false に設定すると
大文字・小文字の違いも厳密に追跡されるようになります。

bash

git config core.ignorecase false

この方法を使えば、Header.tsx → header.tsx のような変更も Git が認識できるようになりますが、以下の理由から今回は採用しませんでした。

おすすめしない理由

ちなみに現在の設定は以下コマンドで確認できます。

bash

git config --get core.ignorecase

オブジェクティブグループでは X の投稿も平日毎日行っています！
IT 関連の小ネタや便利技から、日常のアニメ・ゲーム布教なども幅広く投稿してるので、
ご興味のある方は是非フォロー・いいねをお願いします。