「Module not found: Can't resolve 'xxx'」のビルドエラーがでる。

概要

ローカル（VSCODE）→GitHub→Vercel でデプロイまで行っていますが、いろいろ機能追加していた時に、Vercel でのビルド時に「Module not found: Can't resolve」が出るケースがあり。
一般的な対策として「npm run build」などで実行すれば、同様にエラーが出るケースがあるので、その手順でビルドのエラー内容を確認することで、問題点把握していましたが、例外として、ローカルでの「npm run build」では問題ないが、デプロイで NG が起きるケースあり。
いろんなケースありますが、「Can't resolve 'xxx'」が出た時は以下の対策が有効です。

原因

GitHub の使用で、ファイル名について「inputBox」から「InputBox」へ変更したとしても、変更したファイル名でコミット・プッシュされないという事象がある模様
確認方法として

Module not found: Can't resolve '@/components/inputBox'」

が出た時などは類似事例の可能性あり
GitHub 上でファイル名みるとInputBoxになっている
自分のローカル（VSCODE）上ではinputBoxになっているので、ローカル上では動く状態
ローカル「inputBox」→GitHub「InputBox」→Vercel「InputBox」の状態になって、
Vercel 上での ビルド が「inputBox」参照する状態になっているため失敗する模様。

対策

以下のように、一度リポジトリを削除して、再プッシュの手順もありそうですが、リスクありそうなだったので、ほかに方法ないか検討しました。

Vercel にデプロイ時のビルドエラー
https://qiita.com/tarian/items/f666bf5e8daf5e31a0de

結果しては、一度異なるファイル名でコミット・プッシュしたあと、
再度元のファイル名に変更してコミットすることで、期待通りになりました。
ほかにも、GitHub で大文字小文字で別ファイルとして扱う設定もある模様ですが、施行はしていません。

手順

以下の手順で対応できました。

1. ローカルでファイル名をリネームする。
2. ローカルでのコミット、GitHub へのプッシュ
3. GitHub 上でファイル名変わっていること確認
4. ローカルでファイル名をもとに戻す（正しい名前）
5. ローカルでのコミット、GitHub へのプッシュ
6. GitHub 上でファイル名変わっていること確認

「6」の作業で、GitHub 上でもファイル名正しい状態になったので、Vercel へのデプロイも問題なくなると思います。

具体的には以下の通り作業しました

1. ローカルでファイル名をリネームする。
   　　ファイル名を「inputBox.tsx」から「inputBox2.tsx」へ変更
2. ローカルでのコミット、GitHub へのプッシュ
3. GitHub 上でファイル名変わっていること確認
   　 GitHub 上で「inputBox.tsx」「InputBox.tsx」がなくなって「inputBox2.tsx」が新たにできていることを確認
4. ローカルでファイル名をもとに戻す（正しい名前）
   　　ファイル名を「inputBox2.tsx」から「inputBox.tsx」へ変更
5. ローカルでのコミット、GitHub へのプッシュ
6. GitHub 上でファイル名変わっていること確認
   　 GitHub 上で「inputBox2.tsx」がなくなって「inputBox.tsx」が新たにできていることを確認

一度、「inputBox」を削除し、プッシュすることで再度「inputBox」を作成するという手順を踏みました。
これで、「Can't resolve」のビルドエラーは出なくなった模様

参考

Vercel にデプロイ時のビルドエラー
https://qiita.com/tarian/items/f666bf5e8daf5e31a0de

Github の設定変更
https://qiita.com/sawadashota/items/aa312a3b7e2403448efe

GitHub 上でも、設定次第で対策できそうな状況ですが、そこまで知識ないので・・・単純な手法にしました。