Codepen运行含内联SVG的React代码报Unexpected token '<'错误

在Codepen平台运行React代码时控制台抛出Uncaught SyntaxError: Unexpected token '<'报错，相同代码在VSCode本地环境可正常运行。代码实现了包含内联SVG的React组件，点击按钮可通过GSAP动效库控制SVG旋转。

复现代码 #

let App = () => {
      const handleClick = () => {
        let timeline = gsap.timeline();
          timeline.to(".flower_svg", {
            rotate: 45,
          });
      };

  return (
    <React.Fragment>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" className="flower_svg">
        <g transform="translate(55.5 193.5)">
          <path fill="#A65EC1" d="M-25.5-148.5v-15h-15c-8.3,0-15,6.7-15,15l0,0v15h15C-32.2-133.5-25.5-140.2-25.5-148.5L-25.5-148.5z"/>
          <path fill="#E3A6F1" d="M-10.5-163.5h-15v15c0,8.3,6.7,15,15,15h15v-15C4.5-156.8-2.2-163.5-10.5-163.5L-10.5-163.5z"/>
          <path fill="#A65EC1" d="M-10.5-193.5h15v15c0,8.3-6.7,15-15,15l0,0h-15v-15C-25.5-186.8-18.8-193.5-10.5-193.5L-10.5-193.5z"/>
          <path fill="#B7C6FD" d="M-40.5-193.5h-15v15c0,8.3,6.7,15,15,15l0,0h15v-15C-25.5-186.8-32.2-193.5-40.5-193.5L-40.5-193.5z"/>
        </g>
      </svg>

      <button onClick={() => handleClick()}>Rotate</button>
    </React.Fragment>
  );
};

ReactDOM.render(<App />, document.querySelector("#app"));

报错截图 #

浏览器原生不支持JSX语法解析。本地VSCode环境运行时，项目配置的Babel等构建工具会预先将JSX转译为浏览器可识别的原生JavaScript代码；Codepen默认不对输入的JS代码做预转译处理，直接将源码交付浏览器解析，当浏览器解析到JSX语法开头的<标记时，无法匹配原生JS的语法规则，直接抛出语法错误。

• 打开Codepen JS编辑面板右上角的设置菜单，在JavaScript预处理器选项中选择Babel，开启JSX自动转译能力
• 检查外部依赖配置，确认已正确引入React、ReactDOM、GSAP三个库，避免出现全局对象未定义的报错
• 保存配置后重新运行代码，即可正常渲染组件，点击按钮触发SVG旋转动效

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