React安装react-slot-machine-gen后报jsx实验语法未启用错误

该报错和你编写的App.js代码、本地已配置的Babel JSX转译规则无关。Babel默认会跳过node_modules目录下的所有文件不做转译，而react-slot-machine-gen包的发行产物直接包含未编译的JSX语法，Babel解析到这部分代码时没有应用JSX转译规则，就会抛出对应语法错误。

• 调整Babel配置，单独放行目标第三方包的转译
  不要全局关闭node_modules忽略规则（会大幅拖慢编译速度），仅针对出问题的包单独开放转译权限，修改babel.config.js为如下内容：

  module.exports = {
    presets:[
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    plugins: ["@babel/plugin-syntax-jsx"],
    // 保留其他node_modules包的忽略规则，仅转译react-slot-machine-gen
    ignore: [/node_modules\/(?!react-slot-machine-gen)/]
  }
  

• 若项目基于create-react-app搭建，同步修改webpack loader规则
  create-react-app内置的webpack配置默认也会跳过node_modules下的文件转译，需要通过craco或react-app-rewired修改babel-loader的include范围，将目标包加入处理列表，craco.config.js示例配置如下：

  module.exports = {
    webpack: {
      configure: (config) => {
        config.module.rules.forEach(rule => {
          if (!rule.oneOf) return
          rule.oneOf.forEach(subRule => {
            if (!subRule.loader?.includes('babel-loader')) return
            subRule.include = Array.isArray(subRule.include) ? subRule.include : [subRule.include]
            subRule.include.push(/node_modules\/react-slot-machine-gen/)
          })
        })
        return config
      }
    }
  }
  

• 校验依赖版本兼容性
  部分高版本react-slot-machine-gen依赖React 17+的新版JSX转换规则，和你当前使用的React 16.14.0不兼容，可降级到兼容React16的版本：

  npm install react-slot-machine-gen@1.0.7
  

• 清除缓存重启服务
  配置修改完成后，先清除构建缓存再重启开发服务，避免旧缓存导致配置不生效：

  rm -rf node_modules/.cache
  npm run start
  

查看报错栈中对应的文件路径，如果路径包含node_modules/react-slot-machine-gen，即可确认是第三方包未转译导致的问题，按上述步骤操作后即可修复。

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