Cannot find module 'next/babel' エラーの解決方法
Next.jsプロジェクトでESLintを使用している際に「Parsing error: Cannot find module 'next/babel'」というエラーが発生することがあります。この記事では、このエラーの原因とさまざまな解決方法について詳しく説明します。
問題の概要
このエラーは、Next.jsプロジェクトでESLintが正しく設定されていない場合や、開発環境の設定に問題がある場合に発生します。エラーは主に以下のような状況で現れます：
- モノレポ構成のプロジェクト
- VSCodeでの開発時
- パッケージマネージャーの違い（npm, yarn, pnpm）
- ESLint設定ファイルの配置問題
主要な解決策
方法1: ESLint設定の更新（推奨）
.eslintrc.jsonファイルを以下のように更新します：
{
"extends": ["next/core-web-vitals"]
}WARNING
"next/babel"を単独で使用すると、コンパイルエラーが発生する可能性があります。必ず"next/core-web-vitals"と一緒に使用してください。
方法2: Prettierの追加
Prettierを導入してESLint設定を更新する方法：
npm install --save-dev eslint-config-prettier.eslintrc.jsonを更新：
{
"extends": ["next/core-web-vitals", "prettier"]
}方法3: VSCode設定の調整
プロジェクトルートに.vscode/settings.jsonを作成：
{
"eslint.workingDirectories": ["./client", "./server"],
"eslint.packageManager": "pnpm" // 使用しているパッケージマネージャーに応じて変更
}モノレポプロジェクトでの対応
Turborepoなどのモノレポ構成では、以下の設定が有効です：
{
"root": true,
"extends": ["next/core-web-vitals"],
"overrides": [
{
"files": ["*.js"],
"parser": "espree",
"parserOptions": {
"ecmaVersion": 2020
}
}
]
}警告
一部の解決策ではESLintが完全に無効化される可能性があります。設定変更後は必ずESLintが正しく機能しているか確認してください。
その他の対処法
ESLintサーバーの再起動
VSCodeで以下のコマンドを実行：
ESLint: Restart ESLint Serverプロジェクト構成の確認
ESLint設定ファイルがプロジェクトルートに存在することを確認してください。そうでない場合は、設定ファイルをルートディレクトリに移動し、VSCodeを再起動します。
パッケージマネージャーの設定
使用しているパッケージマネージャーに応じてVSCodeの設定を調整：
{
"eslint.packageManager": "yarn" // or "npm" or "pnpm"
}根本原因と予防策
このエラーの主な原因は、ESLintがNext.jsのBabel設定を見つけられないことです。以下の点に注意することで予防できます：
- 設定ファイルの配置: ESLint設定ファイルは必ずプロジェクトルートに配置
- パッケージマネージャーの整合性: プロジェクトで使用しているパッケージマネージャーとVSCodeの設定を一致させる
- モノレポ構成の適切な設定: ワークスペースごとに適切なESLint設定を行う
まとめ
「Cannot find module 'next/babel'」エラーは、ESLintとNext.jsの連携に関する設定問題に起因することがほとんどです。本記事で紹介した解決策の中から、ご自身のプロジェクト構成に適した方法を試してみてください。
TIP
最新のNext.jsバージョンを使用し、定期的な依存関係の更新を行うことで、多くの互換性問題を予防できます。