🤔
【ESLint】Parsing error: Cannot find module 'next/babel' が出る問題
この記事について
同じリポジトリ内にフロントエンドとバックエンド両方のプロジェクトを作成していたことが原因で、ESLintを導入した際にVScodeにおいて「Parsing error: Cannot find module 'next/babel'」というエラーが出たため、その解決方法をまとめた記事になります。
Next.jsではcreate-next-appでセットアップを行うと、ESLintを使用するか設定することができます。ここで使用するを選択した場合、最初から上記のエラーは発生します。
Parsing error: Cannot find module 'next/babel'
環境
環境は以下のとおりで、同じリポジトリ内にフロントエンドとバックエンド両方のプロジェクトを作成しています。
fronted
├─ package.json
backend
├─ package.json
package.json
"dependencies": {
"next": "13.4.12",
"react": "18.2.0",
"eslint": "8.45.0",
"eslint-config-next": "13.4.12",
}
解決手順
- Next.jsプロジェクトのルートディレクトリ(
package.jsonを置いている場所)に.babelrcを作成する(カスタマイズは不要)。
.babelrc
{
"presets": ["next/babel"],
"plugins": []
}
-
.eslintrcは以下のとおりでOKです。"next/babel"を記述している場合は、VScode上でエラーの波線は消えますが、ESLintを実行した際に別のエラーが出るため削除してください。他の記事でこの方法が紹介されていますが、根本的な解決にはなっていないようです。
.eslintrc
{
"root": true,
"extends": ["next", "next/core-web-vitals"]
}
👇"next/babel"を記述していると、ESLintでチェックができない。
Failed to load config "next/babel" to extend from.
- プロジェクト直下に
.vscode/setting.jsonを作成し、ESLintの実行範囲をフロントエンドディレクトリのみにする。
.vscode
├─ settings.json
fronted
├─ package.json
backend
├─ package.json
{
"eslint.workingDirectories": ["./frontend"]
}
原因
本件は同じリポジトリ内にフロントエンドとバックエンド両方のプロジェクトを作成していたため、VScodeのESLintプラグインがNext/babelを必要としているものの、そのモジュールを見つけられていないことが原因のようでした。
注意
本件では、前述のとおり.eslintrcに"next/babel"を記述するとVScode上でエラーの波線は消えますが、ESLintを実行した際にエラーが出ます。
参考リンク
Discussion