内容
Next.jsプロジェクトをVercelにデプロイ時のビルドで、ModuleNotFoundエラーが発生したため、解決した手段を記述。
Next.jsプロジェクトをVercelにデプロイする手順の記事はこちらにまとめています。
目次
エラー内容
Vercelデプロイ時のエラー文
ModuleNotFoundError: Module not found: Error: Can't resolve 'xxx' in '/vercel/path0/components'
どうやらモジュールが見つからないらしいが、コードを見返してもファイルを参照する相対パスなどに誤りが見受けられない。
エラー原因
Vercelの公式サイトによると、
(概要のみ)
Vercelのデプロイメントでは大文字と小文字を区別するファイルシステムを使用している。
ローカルマシンでファイル名の大文字小文字を変更すると、Git はそれぞれの静的import文の変更だけを拾ってしまう可能性がある。
つまり、ローカルでファイル名を component.tsx ⇒ Component.tsxなどに変更すると、Gitの設定によっては（というか多分デフォルトで）ファイル名の大文字小文字の変更が反映されない。
したがってVercelにデプロイするGitHubのリモートリポジトリでは、誤ったファイル名のままとなっているため、生じたエラーと考えられる。
解決手順
結論
リモートリポジトリのpages/, components/ その他可能性のあるディレクトリを削除し、再push。
私の場合は最終的にはこの方法で解決に至りました。
手順１：プロジェクト全体をバックアップ
ファイル名の大文字小文字を変更した可能性のあるディレクトリをリモートリポジトリから削除するため、復元するためにプロジェクト全体のコピーを作成しバックアップ。
cp -r project/ project-back/
手順２：gitから削除し、push
git rm -r pages/
git rm -r components/
git push
これでローカルとリモートリポジトリから削除
手順３：バックアップファイルから削除したディレクトリをコピーし復元、再push
cp -r project-back/pages/ project/pages/
cp -r project-back/components/ project/components/
git add .
git commit -m "message"
git push
これで再push時に自動デプロイが走り、ビルドを無事passすることができました。
以上