React WebComponent加载报错：Unexpected token '<' 求助

错误原因 #

浏览器原生不支持JSX语法，你代码里的<Counter/>属于JSX语法，直接加载未经过转译的JS文件时，浏览器会将其当作普通JavaScript解析，因此抛出"Unexpected token '<'"的错误。

VSCode中代码显示正常是因为编辑器安装了React相关语法插件，能够识别JSX语法，但这并不代表浏览器可以直接解析这类代码。

解决方法 #

方法一：使用打包工具转译代码（推荐生产环境） #

JSX必须被转译为浏览器能识别的普通JavaScript才能正常运行，最稳妥的方式是使用打包工具（如Vite、Webpack）来处理：

1. 初始化一个React打包项目（以Vite为例）：

   npm create vite@latest my-react-wc -- --template react
   

2. 将你的WebComponent代码迁移到项目中，调整文件导入路径
3. 执行打包命令生成可运行的代码：

   npm run build
   

4. 在HTML中引用打包后dist目录下的JS文件

方法二：开发环境临时使用Babel实时转译（不推荐生产） #

如果只是开发调试，可以通过引入Babel CDN让浏览器在运行时转译JSX：
修改你的HTML文件，添加Babel脚本并调整JS文件的类型：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-9" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <h1>React webcomponent:</h1>
    <counter-wc></counter-wc>
    <script type="text/babel" src="./counterWC.js"></script>
  </body>
</html>

注意：这种方式会在浏览器中实时转译代码，性能较差，仅适合临时调试。

额外提示：React 18中推荐使用新的渲染API #

ReactDOM.render在React 18中已被标记为过时，建议改用createRoot：

// 替换原有的ReactDOM.render代码
const root = ReactDOM.createRoot(mountPoint);
root.render(<Counter />);

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