React配置Babel后仍提示JSX实验语法未启用报错求助

按以下优先级逐一排查即可定位问题：

• 首先排查Babel配置有效性问题
  • 确认babel.config.json语法符合标准JSON规范，不能存在注释、尾随逗号这类非法内容，最小可用配置参考：

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

  • 如果你是用Create React App脚手架创建的项目，根目录手动创建的babel配置文件默认不会被加载，CRA内置了强制的babel规则，自行添加的配置不会生效。这种场景要么执行npm run eject暴露内置配置后修改，要么用react-app-rewired配合customize-cra覆写babel规则，不要单独加独立babel配置。
  • 检查项目内是否存在多份冲突的babel配置：包括.babelrc、.babelrc.json、babel.config.js，以及package.json里的babel字段，多份配置同时存在会导致优先级冲突，你编写的配置不会被读取，建议只保留一份根目录级别的babel配置，删除其余重复配置。
• 排查构建工具的loader规则配置问题
  • 如果你是手动搭建的webpack项目，检查babel-loader规则是否正确：要确保规则匹配.js、.jsx后缀的文件，没有错误排除掉需要转译的业务代码目录，参考配置：

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ],
    resolve: {
      extensions: ['.js', '.jsx', '.json'] // 确保.jsx在可解析扩展名列表中
    }
  }
  

  • 如果你的入口文件后缀是.jsx，必须确保构建工具配置了对该后缀的解析，否则不会触发babel转译流程。
• 排查依赖与缓存问题
  • 删除项目根目录下的node_modules文件夹、对应包管理工具的锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml），重新执行依赖安装命令，解决依赖软链失效、版本不匹配的问题。
  • 清除构建缓存：手动删除node_modules/.cache目录后重新执行编译，旧的构建缓存会导致新的babel配置不被加载。
  • 检查所有@babel/*开头的依赖版本，确保核心包、preset、plugin的大版本号一致，版本不兼容会导致preset加载失败。
• 排查react-router-dom相关的兼容问题
  • 确认本地安装的react-router-dom版本和React版本匹配：React 18需要搭配v6及以上版本的react-router-dom，版本不兼容会导致编译流程异常。
  • 如果你使用的是classic模式的JSX runtime，要确保index.js顶部有import React from 'react'的引入语句，缺失该引入也会触发JSX转译失败。

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