在Babel Standalone中使用import引入React组件遇语法错误求助

问题原因 #

Babel Standalone默认仅转译页面内标注type="text/babel"的脚本代码，通过import加载的外部.js文件会被浏览器直接当作原生JavaScript解析。你的Something.js包含JSX语法（<div>），浏览器无法识别该语法，因此抛出<符号的语法错误。

解决方法 #

方法一：让Babel转译外部组件脚本

给外部组件的脚本标签也加上type="text/babel"和data-type="module"属性，让Babel识别并转译它：

修改后的index.html：

<html>
  <head>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.19.3/babel.js"></script>
  </head>
  <body>
    <div id="root-box"></div>
    <!-- 给外部组件脚本添加Babel识别属性 -->
    <script type="text/babel" data-type="module" src="./Something.js"></script>
    <!-- 主逻辑脚本 -->
    <script type="text/babel" data-type="module" data-presets="react">
      import { Something } from "./Something.js";
      ReactDOM.createRoot(document.getElementById("root-box")).render(
        <Something />
      );
    </script>
  </body>
</html>

Something.js保持原内容不变即可，Babel会自动加载并转译该文件。

方法二：手动替换JSX为React原生API

如果不想依赖Babel转译外部文件，可以把JSX语法替换成React.createElement调用，让浏览器直接解析：

修改后的Something.js：

export const Something = () => {
  return React.createElement('div', null, 'Hello');
}

这种方式无需额外配置脚本标签，直接用原生ES模块加载即可。

注意事项 #

• Babel Standalone仅适用于开发调试场景，生产环境不建议使用，存在性能和加载效率问题。
• 使用ES模块时，必须在本地服务器环境下运行项目（比如用npx serve启动简单服务器），直接打开本地HTML文件会触发跨域错误。

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