ESLint で「Parsing error: Cannot find module ‘@babel/preset-react’」エラーの解決策

React プロジェクトで ESLint を実行した際、次のようなエラーが出ることがあります。

Parsing error: Cannot find module '@babel/preset-react'

これは、ESLint が JSX 構文を理解できずにパースエラーを起こしていることが原因です。
本記事では、原因の仕組みを整理し、確実に解決する手順を解説します。

エラーの原因：JSX を解析する設定が不足している
解決方法
トラブルシューティング
まとめ

エラーの原因：JSX を解析する設定が不足している

ESLint はもともと ECMAScript（JavaScript）の文法を静的解析するツールであり、JSX を直接理解するわけではありません。
そのため、Babel を介して JSX を解析できるようにする設定が必要です。

このエラーは主に次のような場合に発生します。

Babel が @babel/preset-react を導入していない
.babelrc や babel.config.js の設定が不足している
ESLint 側の parser 設定が Babel と連携していない

つまり、Babel と ESLint の設定が噛み合っていないことが根本原因です。

解決方法

1. Babel 用のプリセットを導入する

まず、@babel/preset-react をインストールします。

npm install --save-dev @babel/preset-react

または Yarn を使用している場合：

yarn add -D @babel/preset-react

インストール後、.babelrc または babel.config.js に次の設定を追加します。

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

これにより、Babel が JSX を含むコードを正しくトランスパイルできるようになります。

2. ESLint に Babel パーサーを指定する

ESLint が Babel の設定を理解できるよう、@babel/eslint-parser を導入します。

npm install --save-dev @babel/eslint-parser

次に、.eslintrc.json または .eslintrc.js を編集します。

{
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "requireConfigFile": false,
    "babelOptions": {
      "presets": ["@babel/preset-react"]
    }
  },
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "plugins": ["react"]
}

この設定により、ESLint は Babel 経由で JSX を解析できるようになります。

3. `eslint-plugin-react` を導入する

JSX の構文だけでなく、React コンポーネント特有のルールを適用したい場合は、eslint-plugin-react の導入が推奨されます。

npm install --save-dev eslint-plugin-react

extends に "plugin:react/recommended" を追加すると、React 用の基本ルールセットが有効になります。

4. 設定の確認

すべての設定を行ったら、次のコマンドで ESLint が正常に動作するか確認します。

npx eslint src/**/*.jsx

問題が解消していれば、Parsing error は出ず、通常どおりの ESLint 警告のみが表示されます。

トラブルシューティング

Babel の設定ファイルを持たない場合

最近の Create React App（CRA）や Next.js では Babel 設定が内部的に管理されているため、
.babelrc を持たないケースがあります。その場合は、ESLint 側で明示的に requireConfigFile: false を設定しておきます。

"parserOptions": {
  "requireConfigFile": false,
  "babelOptions": {
    "presets": ["@babel/preset-react"]
  }
}

`@babel/core` が未インストールの場合

@babel/eslint-parser は内部で @babel/core を参照します。
もしインストールされていない場合は、次のコマンドで追加します。

npm install --save-dev @babel/core

まとめ

「Parsing error: Cannot find module ‘@babel/preset-react’」エラーは、ESLint が JSX を認識できていないことが原因です。
解決するには、Babel のプリセットと ESLint のパーサー設定を揃える必要があります。

ポイント

@babel/preset-react を導入して Babel に JSX を認識させる
ESLint の parser に @babel/eslint-parser を設定する
eslint-plugin-react を導入して React ルールを有効化する

ESLint と Babel の役割を正しく理解し、設定を一貫させることで、React プロジェクトの静的解析を安定して運用できます。