从React 16.x升级到17.0.2后构建遇JSX短语法报错如何解决？

• 核心问题是项目的Babel编译配置或相关依赖版本不兼容React 17的JSX规则，无法识别JSX Fragment短语法<>：
  • React 17引入了全新的自动JSX转换逻辑，不再要求JSX文件顶部强制引入React，但需要@babel/preset-react版本≥7.9.0，且配置对应的参数才能支持新语法
  • 若项目仍使用旧版Babel编译依赖，或未适配React 17的JSX转换配置，编译时就会将<>识别为非法Token
  • 若仅开发环境正常、打包时报错，也可能是生产环境的babel压缩插件版本过低，或ESLint校验规则未适配短语法

• 方案1：适配React 17的Babel配置（推荐）
  首先升级相关编译依赖到符合要求的版本：

  npm install @babel/preset-react@latest @babel/plugin-transform-react-jsx@latest --save-dev
  

  随后修改项目Babel配置文件（.babelrc、babel.config.js或package.json的babel字段），新增runtime配置：

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

  如果你使用Create React App搭建项目，直接升级react-scripts到4.0.0以上版本即可自动适配：

  npm install react-scripts@latest --save-dev
  

• 方案2：兼容写法（无需修改构建配置）
  暂时将所有短语法<>替换为React Fragment的完整写法，替换前确保文件顶部有React引入语句：

  // 替换前
  <>
    <a href="/gamer">玩家中心</a>
    <span>用户名</span>
  </>
  
  // 替换后
  <React.Fragment>
    <a href="/gamer">玩家中心</a>
    <span>用户名</span>
  </React.Fragment>
  

• 方案3：适配ESLint校验规则
  如果报错来自ESLint校验，升级eslint-react相关插件即可：

  npm install eslint-plugin-react@latest --save-dev
  

  在.eslintrc配置文件中添加对应规则：

  {
    "rules": {
      "react/jsx-fragments": ["error", "syntax"]
    }
  }
  

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