React无法编译合法JSX语法：Fragment短语法<>报Unexpected token错误

核心原因是你项目中的编译依赖不支持<>...</>短语法的转译，常见触发场景及对应解决方法如下：

• Babel版本低于要求阈值
  JSX Fragment短语法是Babel v7.0.0-beta.31版本才新增支持的语法特性，如果你的项目依赖的@babel/core版本低于该版本，编译器无法识别该语法，就会抛出Unexpected token错误。
  解决方法：升级Babel相关依赖到7.0.0正式版及以上。
• Babel React预设缺失或配置错误
  即使Babel版本满足要求，如果项目的Babel配置文件（.babelrc、babel.config.json等）中没有添加@babel/preset-react预设，或者该预设版本过低，也无法完成JSX Fragment短语法的转译。
  解决方法：检查Babel配置，确保已正确引入@babel/preset-react，且该预设版本和@babel/core版本匹配。
• 项目框架版本过低
  如果你使用的是Create React App创建的项目，CRA 2.0以下版本默认依赖的Babel版本不支持该短语法，同样会触发编译错误。
  解决方法：升级CRA到2.0及以上版本，或者临时将<>...</>替换为完整的<React.Fragment>...</React.Fragment>写法，后者在React 16.2及以上版本都可以正常被低版本Babel转译。
• 打包工具配置异常
  检查webpack等打包工具的babel-loader配置，确认是否排除了你的.jsx文件所在目录，或者配置的语法转译规则没有覆盖.jsx后缀的文件。

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture