内容
モダン開発を学び始めて半年の駆け出しフロントエンドエンジニア志望の者です。
今回、3ヶ月ほどかけて開発してきたアプリをデプロイしまして、
エラーがちょこちょこ発生したため、解決した手段を記述しておきます。
【1つ目】 Cannot find module エラー
Next.jsでローカルではビルド成功するのに、Vercelで"Type error: Cannot find module"が発生しました。
Type error: Cannot find module '@/components/{コンポーネント名}' or its corresponding type declarations.
原因
原因は、下記2点が考えられました。
- importパスの大文字小文字が誤っている
- 過去にファイル名を修正したキャッシュが残っている
importパスに誤りはなかったので、gitのキャッシュが考えられました。
VercelにデプロイするGitHubのリモートリポジトリは、
ファイル名の大文字小文字変更を拾ってくれないみたいです。（設定次第でなんとかなるらしい）
ファイル名の変更が反映されていないままになっているため、エラーになったと考えられました。
解決方法
もっといい方法があるのかもしれませんが、
ファイル名を変更した可能性が高そうな src/pages, src/components の
ディレクトリごと削除、再度pushしました。
※ rm する前に それぞれバックアップは残してください
git rm -r src/pages/
git rm -r src/components/
git push
復元して再push
git add .
git commit -m "復元して再push"
git push
【2つ目】 ReferenceError: localStorage is not defined エラー
localStorage を使用した場合に起こりました。
クライアントサイドで使用する場合は、条件付きで使用しないと怒られちゃうみたいです。
（ブラウザのWebストレージ機能なのだから、そりゃそうか）
解決方法
クライアントサイドであることを確認し、ブラウザ環境でのみ localStorage を操作するように、と修正しました。
これで、サーバーサイドでのエラーを回避できます。
if (typeof window !== 'undefined') {
const item = localStorage.getItem('key')
}
これで無事デプロイできました！
ビルド時のエラー無視の方法（Typescriptの型エラーとか）も設定次第でできそうですが、
どれくらいの設定なら許容なのだろう。。とりあえず今回はやりませんでした。
次は、作成したアプリについてまとめようと思います！