JSX 语法支持错误解决方案

问题描述

在使用 Webpack 和 Babel 配置 React 项目时，经常会遇到以下错误：

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

这个错误表明 Babel 无法正确识别和转换 JSX 语法，通常出现在没有使用 Create React App 等脚手架工具的自定义 Webpack 配置中。

根本原因

JSX 是 React 的语法扩展，需要特定的 Babel 预设（preset）或插件（plugin）来转换成标准的 JavaScript 代码。如果没有正确配置，Babel 将无法处理 JSX 语法。

解决方案

1. 基础配置（最常用）

创建或修改 babel.config.js 文件：

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

或者创建 .babelrc 文件：

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

2. React 18+ 配置

对于 React 18 及以上版本，推荐使用自动运行时模式：

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

3. Webpack 配置更新

在 Webpack 配置中明确指定 Babel 选项：

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

常见场景解决方案

1. 使用 TypeScript

如果项目使用 TypeScript，确保文件扩展名为 .tsx 而不是 .ts，并配置相应的 TypeScript 预设。

2. 使用 Create React App 并 eject

如果使用了 npm run eject，检查生成的 webpack.config.js 文件中的以下配置：

// 确保这些选项没有被设置为 false
{
  babelrc: true,
  configFile: true,
}

3. Monorepo 项目结构

对于使用 yarn workspaces 或 monorepo 的项目，需要在 Webpack 配置中添加：

{
  test: /\.(js|jsx)$/,
  use: ['babel-loader'],
  options: {
    babelrcRoots: ['../*']  // 允许处理根目录外的 Babel 配置
  }
}

4. Rails 项目

在 Rails 中使用 Webpacker，确保 config/webpacker.yml 中包含 JSX 扩展名：

extensions:
  - .jsx
  - .mjs
  - .js
  # 其他扩展名...

安装必要依赖

确保已安装所有必要的 Babel 包：

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
# 或
yarn add -D @babel/core @babel/preset-env @babel/preset-react babel-loader

验证配置

创建简单的测试文件验证配置是否生效：

// src/test.jsx
import React from 'react';

const TestComponent = () => <h1>Test JSX</h1>;
export default TestComponent;

运行构建命令检查是否还有错误：

npm run dev
# 或
yarn dev

注意事项

WARNING

1. 确保文件扩展名正确：包含 JSX 的文件应该使用 .jsx 扩展名
2. 检查 node_modules 是否被正确排除在 Babel 处理之外
3. 确认所有相关依赖版本兼容

TIP

使用 npx babel --watch src --out-dir dist --presets @babel/preset-env,@babel/preset-react 命令可以直接测试 Babel 配置是否正确工作

总结

JSX 语法支持问题通常由 Babel 配置不当引起。通过正确配置 babel.config.js 或 .babelrc 文件，并确保 Webpack 中正确使用了 babel-loader，可以解决大多数相关问题。对于特定场景（如 React 18+、TypeScript、Monorepo 等），需要采用相应的特殊配置。