手动搭建React项目时Babel报错JSX实验语法未启用如何解决？

核心问题 #

你当前的配置文件名存在拼写错误：你命名为bable.config.json，Babel可识别的根配置文件正确名称为babel.config.json，拼写错误会直接导致Babel无法加载配置，JSX语法转换规则未生效。

第一步操作 #

将配置文件重命名为babel.config.json，重新执行npx babel index.jsx --out-dir lib即可解决90%的该类问题。

若修改后仍报错，按以下步骤排查 #

• 确认依赖安装完整
  执行以下命令校验核心依赖是否存在：

  npm list @babel/core @babel/preset-env @babel/preset-react
  

  若提示缺失依赖，执行安装：

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

• 手动指定配置文件路径
  避免Babel自动查找配置路径出错，执行命令时显式传入配置路径：

  npx babel index.jsx --out-dir lib --config-file ./babel.config.json
  

• 适配高版本React的配置
  如果你使用React 17及以上版本，需为preset-react添加自动runtime配置，修改babel.config.json内容如下：

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

• 校验工作目录
  执行Babel命令的工作目录必须和babel.config.json所在的项目根目录一致，不要在子目录下直接执行转换命令。
• 清除缓存重试
  删除依赖目录和锁文件后重新安装依赖再测试：

  rm -rf node_modules package-lock.json
  npm install
  npx babel index.jsx --out-dir lib
  

内容的提问来源于stack exchange，提问作者Robert M. Münch