如何修复使用React npm包时提示「不支持实验性语法jsx」的错误

• 优先确认你是否未预编译源码直接发布
  你本地开发环境有完整的babel转译配置可以处理JSX语法，但你如果直接将src下的JSX/TSX源码发布到npm，大部分用户项目的babel-loader默认会跳过node_modules目录下的文件转译，就会触发该报错。
  解决方法：
  发布前用@babel/cli或rollup、webpack等打包工具预先把所有JSX语法转译为普通JS代码，将编译后的产物（通常放在dist或lib目录）发布到npm，同时确保package.json中的main字段指向编译后的入口文件，示例：

{
  "main": "dist/index.js"
}

• 检查你项目的Babel配置是否生效
  如果已经配置了@babel/preset-react但转译不生效，先确认配置文件（babel.config.json/.babelrc）存放在项目根目录，若用打包工具打包，确认babel-loader的include配置覆盖了你的组件源码目录，没有被exclude规则误排除。
• 检查依赖配置是否正确
  @babel/preset-react、@babel/plugin-syntax-jsx属于开发依赖，需要放在package.json的devDependencies字段下，不要放到dependencies中，避免引发用户侧的babel依赖版本冲突。
• 特殊场景：如果确实需要直接发布源码不预编译
  需要在包的使用说明中明确告知用户，需要将你的包添加到他们项目babel-loader的include规则中，同时在他们的babel配置中添加@babel/preset-react预设，否则无法正常转译你包内的JSX语法。

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