使用React Fragment <> </>时出现语法错误的问题排查

• 核心问题：react-scripts版本过低
  你使用的react-scripts@0.9.5是2017年发布的老旧版本，它内置的Babel插件不支持React短语法Fragment（<>）。尽管React 18本身支持该语法，但代码编译依赖react-scripts提供的Babel配置，老版本Babel未加入对短Fragment的解析支持，因此会抛出“Unexpected token”语法错误。

• 逻辑验证
  短语法Fragment是React 16.2.0才正式引入的特性，而react-scripts@0.9.5对应的Babel preset-react版本不包含解析该语法的插件——哪怕你升级了react和react-dom到18.x，编译环节仍沿用老的Babel规则，自然无法识别<>。换成div能正常编译，是因为div是标准HTML标签，老版本Babel完全可以处理。

• 解决办法
  升级react-scripts到支持短Fragment的版本，至少升级到react-scripts@2.0.0及以上（该版本开始内置的Babel已支持短语法Fragment）。执行命令：

  npm install react-scripts@latest --save
  # 或使用yarn
  yarn add react-scripts@latest
  

  注意：升级后可能需要处理部分依赖兼容问题，建议先备份项目再操作。

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