Vite+React项目启动报错：Support for the experimental syntax 'jsx' isn't currently enabled

Question

在使用 Vite 构建 React 项目时，启动时报错：“Support for the experimental syntax 'jsx' isn't currently enabled”，通常是因为 Babel 或 ESLint 未正确配置以支持 JSX 语法。Vite 默认使用现代 ES 模块构建方式，若项目中引入了 JSX 文件但未启用相应解析插件，ESLint 或构建工具会在解析时抛出此错误。 该问题常见于未安装或未正确配置 @vitejs/plugin-react 插件，或缺少 Babel 相关依赖（如 @babel/eslint-parser 和 @babel/preset-react）。此外，ESLint 的 parser 设置未指向 '@babel/eslint-parser'，也会导致 JSX 解析失败。 解决方法包括：安装必要依赖、配置 Vite 使用 React 插件，并在 ESLint 配置文件中设置正确的 parser 及扩展规则。

Answer 1

一、问题现象与背景分析

在使用 Vite 构建 React 项目时，开发者可能会遇到如下报错：

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

该错误通常出现在项目中使用了 JSX 语法，但构建工具或代码检查工具未正确配置以支持 JSX 的解析。

Vite 默认使用现代 ES 模块构建方式，并不自动处理 JSX 语法。因此，若项目中包含 JSX 文件（如 .jsx 或 .tsx 文件），但未启用相应的解析插件，ESLint 或构建工具就会抛出此错误。

该问题的根源通常涉及以下几个方面：

• 未安装或未正确配置 @vitejs/plugin-react 插件
• 缺少 Babel 相关依赖，如 @babel/eslint-parser 和 @babel/preset-react
• ESLint 配置中未将 parser 设置为 @babel/eslint-parser

二、问题诊断流程

为了更系统地定位问题，可以按照以下流程进行排查：

graph TD
    A[项目启动失败] --> B{是否使用 JSX 文件？}
    B -->|是| C{是否安装 @vitejs/plugin-react？}
    C -->|否| D[安装插件]
    C -->|是| E{是否配置 ESLint 使用 @babel/eslint-parser？}
    E -->|否| F[配置 parser]
    E -->|是| G{是否安装 Babel 核心依赖？}
    G -->|否| H[安装 @babel/core、@babel/eslint-parser 等]
    G -->|是| I[检查 Babel 配置是否包含 preset-react]
    I --> J[问题解决]

三、解决方案详解

以下是解决该问题的详细步骤，涵盖了依赖安装、插件配置和 ESLint 设置。

1. 安装必要的依赖

确保项目中已安装以下关键依赖：

npm install --save-dev @vitejs/plugin-react @babel/core @babel/eslint-parser @babel/preset-react

或者使用 yarn：

yarn add --dev @vitejs/plugin-react @babel/core @babel/eslint-parser @babel/preset-react

2. 配置 Vite 使用 React 插件

在项目根目录下的 vite.config.js 文件中引入并配置 @vitejs/plugin-react 插件：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()]
});

3. 配置 ESLint 支持 JSX 语法

在项目根目录下创建或修改 .eslintrc.js（或 .eslintrc.json）文件，添加如下配置：

module.exports = {
  parser: '@babel/eslint-parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    requireConfigFile: false,
    babelOptions: {
      presets: ['@babel/preset-react']
    }
  },
  extends: ['eslint:recommended', 'plugin:react/recommended']
};

4. 验证配置是否生效

完成上述配置后，重新启动 Vite 项目：

npm run dev

如果项目成功启动且不再报错，则说明配置已正确应用。

四、常见误区与进阶建议

在实际开发中，以下是一些常见的误区和进阶建议：

• 误以为 Vite 自动支持 JSX： Vite 默认不处理 JSX，必须通过插件手动启用。
• 忽略了 ESLint 的 parser 设置： 即使安装了 Babel 相关依赖，若未设置 parser，ESLint 仍无法识别 JSX。
• 未正确配置 Babel： 若未在 Babel 配置中加入 @babel/preset-react，JSX 语法将无法被正确解析。
• 建议使用 Prettier + ESLint 联合格式化： 可以提升代码规范性和可维护性。