JSX構文のサポートエラーの解決方法

問題の概要

Reactアプリケーションを開発中に、以下のエラーが発生することがあります：

Support for the experimental syntax 'jsx' isn't currently enabled

このエラーは、主にJSX（JavaScript XML）構文を適切に変換するBabelの設定が正しく行われていない場合に発生します。特に、Create React Appを使用せずに手動でReactプロジェクトを設定した際によく見られます。

エラーの原因

このエラーの主な原因は以下のいずれかです：

1. Babelの設定ファイル（.babelrc または babel.config.js）が適切に設定されていない
2. Webpackの設定にBabelプリセットの指定が不足している
3. ファイル拡張子の問題（.jsファイルにJSXが含まれている）
4. モノレポ環境でのBabel設定の不備
5. 依存関係のインストールが不完全

解決方法

方法1: Babel設定ファイルの修正

最も一般的な解決策は、プロジェクトルートにBabel設定ファイルを作成することです。

babel.config.jsを使用する場合：

module.exports = {
  presets: [
    "@babel/preset-env",
    ["@babel/preset-react", { runtime: "automatic" }]
  ]
};

または .babelrcファイルを使用する場合：

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

TIP

React 17以降ではruntime: "automatic"オプションを使用することで、各JSXファイルでReactを明示的にインポートする必要がなくなります。

方法2: Webpack設定の追加

Webpack設定ファイルで直接Babelプリセットを指定することもできます：

module.exports = {
  // ...他の設定
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }
    ]
  }
};

方法3: ファイル拡張子の修正

JSXを含むファイルは.jsx拡張子を使用するか、またはWebpackがJSXを含む.jsファイルを適切に処理できるように設定します：

// webpack.config.js
module.exports = {
  // ...
  resolve: {
    extensions: ['.js', '.jsx'] // 両方の拡張子を認識
  }
};

方法4: モノレポ環境での設定

Yarn Workspacesやモノレポ環境では、追加の設定が必要です：

{
  test: /\.(js|jsx)$/,
  use: ['babel-loader'],
  exclude: /node_modules/,
  options: {
    presets: ['@babel/preset-env'],
    babelrcRoots: ['../*'] // 親ディレクトリの設定も読み込む
  }
}

よくあるシナリオ別の解決策

Create React Appを使用している場合

// 設定をカスタマイズする場合はejectするか、react-app-rewiredを使用
// または、誤って/srcパスでインポートしていないか確認
import { Component } from 'package-name';        // ✅ 正しい
import { Component } from 'package-name/src';    // ❌ 間違い

TypeScriptを使用している場合

// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

RailsプロジェクトでWebpackerを使用している場合

# config/webpacker.yml
extensions:
  - .jsx
  - .mjs
  - .js
  # ...その他の拡張子

トラブルシューティング

1. 依存関係の確認

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

2. 設定ファイルの場所の確認

   • Babel設定ファイルはプロジェクトルートに配置する
   • src/ディレクトリ内には配置しない

3. キャッシュのクリア

   npm start -- --reset-cache

WARNING

プロジェクトによっては、babel.config.jsと.babelrcの両方がある場合、競合が発生する可能性があります。基本的にはどちらか一方を使用するようにしましょう。

まとめ

「Support for the experimental syntax 'jsx' isn't currently enabled」エラーは、主にBabelの設定不足が原因です。基本的な解決手順は以下の通りです：

1. 必要なBabelプリセットをインストールする
2. Babel設定ファイルを適切に設定する
3. Webpackの設定を確認する
4. ファイル拡張子を適切に扱う

これらの手順に従うことで、JSX構文の変換問題は解決できるはずです。