はじめに
Next.jsで新規プロジェクトを作成した際にファイルのあちこちでエラーが出ました。
モジュール '○○' が見つかりません。'moduleResolution' オプションを 'node' に設定することか、'paths' オプションにエイリアスを追加することを意図していましたか?
といったエラーが出力され、moduleResolutionに問題があったのは一目瞭然でしたが、
今回はその解決方法について備忘録としてQiitaに投稿します。
（なんでデフォルト設定でエラーになるんだ。。）
対象者
Next.jsでプロジェクトを作成して、上記のエラーに悩まされている人です。
解決方法だけではなく、一応エラー内容にも触れています。
前提
node等のバージョン情報を記載しておきます。
関係ないですが、この記事を書き始めてからnext.jsのバージョンが14.0.1になっていることに気づきました。
| library | version |
|---|---|
| node | 18.17.1 |
| npm | 9.6.7 |
| next.js | 14.0.1 |
プロジェクトを作成する
プロジェクトを作成したい場所で、以下コマンドを実行。
npx create-next-app@latest
色々聞かれますが、全部デフォルト回答でOK
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
プロジェクト作成完了です。
お手軽ですね。
src/app/page.tsxを確認してみる
「やった、作成できたぞ！」と思ったらファイルのあちこちでエラーが出力されていました。
冒頭でもお話しした通り、'moduleResolution' オプションをうまいことやれ！ とのことなのでtsconfig.jsonファイルを見に行きます。
tsconfig.jsonファイルを修正
結論、以下のように修正するとエラーがすべて消えました。
{
"compilerOptions": {
・・・
- "moduleResolution": "bundler",
+ "moduleResolution": "Node16",
・・・
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
moduleResolutionの説明
Typescript公式サイトいわく、moduleResolutionは 「モジュール解決戦略を指定します。」 とのことです。
...うーん、よくわからん。
よくわかりませんが、設定値の説明を見てみるとモジュールのエクスポートやらインポートのやり方を指定しているようです。
要約すると以下のような感じ。
| 設定値 | 説明 |
|---|---|
| 'Node16', 'Nodenext' | Node.js の最新バージョンの場合はこれでOK。ECMAScript と CommonJS の両方がサポートされている。 |
| 'Node10', 'Node' | v10 より古い Node.js バージョン用。CommonJS のみをサポート。おそらく最新のコードでは使用する必要はない。 |
| 'Bundler' | Node16 や Nodenext とほぼ同様。違う点は、bundler はインポートの相対パスにファイル拡張子を必要としない。 |
| 'Classic' | 旧バージョンで使用していた。今は使わない。 |
※ECMAScriptをサポート：モジュールは import export で扱うよ
※CommonJSをサポート：モジュールは require exports で扱うよ
初期値のBundlerを設定しておくと、モジュールをインポートするときに拡張子をいちいちパスに記載しなくてよいくらいのメリットしかないっぽいので、Node16、もしくはNodenextの指定でよさそうです（これら2つに違いはなさそう）。
おわりに
以上です。
誰かのお役に立ちますように ^^