こんにちは、エンジニアのオオバです。
Next.jsで開発中に起きるModuleNotFoundError。
困りますよね。。。
ローカル環境だと上手く動くのですが、
いざVercelでデプロイするとエラー。
「なぜ？？」
ってなります。
本記事ではNext.jsのコンパイル時に起きた
ModuleNotFoundErrorの対処法を解説します。
Module not found: Error: Can't resolveは、タイプミスをまず疑おう
今回の原因は、 「import文でタイプミスしていた」 でした。
「なんじゃそりゃ！」って怒った方へ、聞いてください。
ローカルでは動いていたのです。
不思議ですよね。。。
具体的にはこんな感じです。
ファイルは以下のパスに格納。
libs/components/test.jsx
test.jsxは以下のような内容です。
const Test = ()=> {
// ~~~~ 略 ~~~~
}
exrpot default Test;
test.jsxは以下のような間違った使い方をしていました。
import Test from .ibs/components/Test
正しくは以下👇。
※Testは「T」は小文字です。
import Test from .ibs/components/test
→11万文字で徹底解説した「DOTweenの教科書」Unityアニメーションの超効率化ツールはこちら
ローカル環境では動いてしまうので注意
ローカル環境では動いてしまっていました。
それ故、原因を突き止めるのに時間がかかりました。
具体的には以下のようなエラーが出力されていました。
ModuleNotFoundError: Module not found: Error: Can't resolve '.libs/components/Test' in '/vercel/path0/pages/entry'
検索するとWebPack関連の対処法が出てくる
ModuleNotFoundError: Module not found: Error: Can't resolveで
検索すると、WebPackの話が大量にヒットします。
モジュール設定の修正は検証に時間がかかります。
その前にタイプミスのチェック！
タイプミスしているかもしれませんよ。
ローカルで起こらないエラーが最も厄介なのです。
※補足ローカルでビルドコマンドを叩いても同様のエラーは出ると思います（今回は試していない）
まとめ : Module not found: Error: Can't resolveの対処法
ということで、以下のようなエラーが出たときの対処法を解説してきました。
ModuleNotFoundError: Module not found: Error: Can't resolve
ググるとWebPackのトラブルがたくさんヒットします。
しかし、単純なタイプミスで時間を失っているかもしれませんよ。
（最終的にWebPackを疑うことになるかもしれませんが。。。）
この記事が皆様のお役に立てば幸いです。
この記事が気に入ったらフォローしよう
「Unity初心者大学」というUnity初心者向けのYouTube始めました！！
ぜひチャンネル登録をお願いします！
最後まで読んでいただきありがとうございました！
すばらしいNext.jsライフをお過ごしください。
- next.js v11.1.2
- react v17.0.2