Zenn
🧙

Next.js【Parsing error: Cannot find module 'next/babel'】を解決する魔法🧙‍♂️✨

2024/02/18に公開
Docker
Next.js
ESLint
Prettier
#
nextbabel
tech

概要

Parsing error: Cannot find module 'next/babel'の解決する魔法を共有したいと思います(｀･ω･´)b

発生条件

サブディレクトリにプロジェクトを置くような以下のディレクトリ構成(例:Docker環境等)で、
Next.jsプロジェクトを作成しEslintのlint rules plugin(eslint-config-prettierやeslint-plugin-tailwindcss...etc)等をinstallすると発生します。
正確には、.eslintrcに"prettier"等を追加した時です。

tree
docker-nextjs-project
├── .vscode
│   └── settings.json
├── next-app
|   ├── src
|   |   └── app
|   ├── .eslintrc.json
|   ├── .gitignore
|   ├── next-env.d.ts
|   ├── next.config.mjs
|   ├── package-lock.json
|   ├── package.json
|   ├── postcss.config.js
|   ├── tailwind.config.ts
│   └── tsconfig.json
├── .dockerignore
├── docker-compose.yml
└── Dockerfile

そのエラーが以下になります
なんのこっちゃデスネー(´・ω・｀)

❌Parsing error: Cannot find module 'next/babel'
Require stack:
- C:\Users\**\docker-nextjs-project\next-app\node_modules\next\dist\compiled\babel\bundle.js
- C:\Users\**\docker-nextjs-project\next-app\node_modules\next\dist\compiled\babel\eslint-parser.js
- C:\Users\**\docker-nextjs-project\next-app\node_modules\eslint-config-next\parser.js
- C:\Users\**\docker-nextjs-project\next-app\node_modules\@eslint\eslintrc\dist\eslintrc.cjs

Make sure that all the Babel plugins and presets you are using
are defined as dependencies or devDependencies in your package.json
file. It's possible that the missing plugin is loaded by a preset
you are using that forgot to add the plugin to its dependencies: you
can workaround this problem by explicitly adding the missing package
to your top-level package.json.

以下を参考にして.eslintrcに"next/babel"を追加してみますが。。。。

https://zenn.dev/shimotaroo/articles/c8f2e751cd7877

Vercelでデプロイして検証、Build Logには以下が出力されます( ﾉД`)ｼｸｼｸ…

× ESLint: Failed to load config "next/babel" to extend from. Referenced from: /vercel/path0/next-app/.eslintrc.json

原因

サブディレクトリのnext-appにプロジェクトを置いた事によりEslintが管理先のディレクトリを見失う事が原因でした。

解決方法

いたってシンプルでした！

ルート直下の.vscodeフォルダにあるsettings.jsonに以下をコピぺ追記します。

"eslint.workingDirectories": ["next-app"]

無い方はルート直下に.vscodeフォルダを作成しsettings.jsonを作成して以下のコードを貼り付けます。

setting.json
{
  "eslint.workingDirectories": ["next-app"]
}

デプロイして本当に解決したか試す

ヤッタネ！ちゃんとエラーが消えました。

fix-nextbabel-error

以上です！

脚注

  1. 目次: 発生条件のtree図参照 ↩︎

Discussion