ローカルでは起こらないビルドエラーが発生
Next.jsとTypeScriptで作成したアプリをVercelにてデプロイした際に下記のエラーによりビルドが失敗しました。
Type error: Cannot find module '../../types/fetchMemoList' or its corresponding type declarations.
情報を調べるとtypeconfigやpackage.jsonの設定ミスなど色々な情報が出てきましたが、読んでみてもどれも違いそう。。。
この調査で2時間くらいネットを彷徨いました。
結論：参照先のファイル名が違った、、、
結論から申し上げますと、モジュールとして参照しているファイル名とimport文のファイル名が違ったことにより参照先が見つからなかったという凡ミスだったのです。
まさになんの捻りもないエラー文そのままのエラーです。
ファイル名の大文字小文字の変更が落とし穴
わたしも含めプログラミング経験が浅いと意外と気がつかない落とし穴だと思いますので、誰かの参考になればと思い記事にしました。
上記のミスに気がつかなかった要因として、ローカル環境では問題なくビルドできていた点にあります。ですのでコードをいくら見返しても原因が分かりませんでした。
そんなときに下記の記事に行き当たりました。
TypeScriptで、TS2307のエラーが出たとき、TS1149のエラーも疑う
そうして自分のローカルのファイル名とGitHubのリポジトリを比較すると、ローカルではファイル名の先頭が小文字だったのですが、リモート側はファイル名の先頭が大文字となっています。
ファイル名の大文字小文字だけを変換した場合、gitに観測されないことがある。
そのため、ファイル名変更ができているように見えて、実はローカルリポジトリのステージングには載っておらず、何度プッシュしていてもリモート上のファイル名は更新されていなかったのです。
ローカルリポジトリのファイル名を変更して再プッシュで解消
下記の対応をし、ローカルとリモートのファイル名に差異が無いことを確認したところビルドエラーは解消されました。
ファイル名の大文字小文字だけを変換した場合、gitに観測されないことがある。
git mvを利用することで、ステージングに載せることが可能である。
git mv 【現在のファイル名】【新しいファイル名】
ちなみにリモートにプッシュしていなくても、git ls-filesコマンドでローカルリポジトリのファイル名を参照するとファイル名に差異が確認できるので、ファイル名だけを変更した場合にgitに観測されているかを確認してからプッシュしておくとプッシュの2度手間にならない。
merge後に気づいたらより面倒ですしね。。。
ファイル名変更したあとに普通にプッシュできてたのと、ローカル環境ではエラーにならないため全く気がつかない落とし穴でした。
誰かの参考になれば幸いです。