React项目中@babel/preset-react与@babel/plugin-syntax-jsx未生效求助

你遇到的这个报错虽然常见，但有几个容易忽略的细节可以逐一排查：

1. 先确认核心依赖是否安装齐全 #

@babel/preset-react 需要配合Babel核心包才能生效，先检查有没有装全以下依赖：

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

漏装@babel/core是很多人踩的坑，会直接导致Babel无法正常解析配置。

2. 简化你的Babel配置 #

你的配置里同时添加了@babel/plugin-syntax-jsx和@babel/preset-react，但**@babel/preset-react已经内置了JSX语法支持**，单独加这个插件反而可能引发冲突。直接删掉插件项，简化配置：

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

3. 检查构建工具的文件处理规则 #

如果用Webpack或Vite这类工具，要确保它们能识别.jsx/.tsx文件并交给Babel处理：

• Webpack配置示例：

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

• Vite配置示例：

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

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

4. 检查文件扩展名 #

确保你的React组件文件用.jsx或.tsx后缀，而非.js。部分构建工具默认不会解析.js文件中的JSX语法，除非额外配置。

5. 清理缓存并重装依赖 #

缓存可能导致配置不生效，执行以下操作：

# 删除依赖包和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install
# 清理Babel缓存
npx babel --clear-cache

6. 确认配置文件的位置与优先级 #

• 确保.babelrc或babel.config.js在项目根目录（与package.json同级）
• 避免同时存在两种配置文件，Babel会优先读取.babelrc，但可能引发冲突，建议只保留一个。

内容的提问来源于stack exchange，提问作者Lauren G