こんにちは、エンジニアのオオバです。

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ライフをお過ごしください。

オススメ記事
検証環境