添加"type":"module"后Node.js运行React脚本遇Unexpected token '<'错误

错误原因 #

你遇到的Node.js语法错误，本质是两个问题叠加：

1. 直接用node script.js执行包含JSX语法的脚本，Node原生无法识别JSX的<符号；
2. babel-standalone是浏览器端的转译工具，不会在Node环境中自动处理你的代码，即使在package.json中添加了"type": "module"解决了import问题，也无法转译JSX。

另外，你在浏览器script标签中同时设置type="text/babel"和data-type="module"也会引发冲突——babel-standalone的模块处理逻辑和原生ESM不兼容，导致转译失效。

解决方案 #

根据你的运行场景选择对应方案：

场景1：在浏览器中通过CDN运行React #

1. 删除package.json中的"type": "module"（该配置仅适用于Node环境）
2. 修改index.html的script标签，移除data-type="module"，让babel-standalone正常转译代码：

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="script.js" type="text/babel"></script>

3. 确保所有被script.js导入的JSX文件，要么也通过<script type="text/babel">标签提前引入，要么调整为符合babel-standalone模块规则的写法（注：babel-standalone对ESM导入的支持有限，复杂项目更推荐用构建工具）

场景2：在Node环境中运行脚本（如SSR、本地构建） #

1. 安装Babel转译依赖：

npm install @babel/core @babel/preset-react @babel/node --save-dev

2. 在项目根目录创建.babelrc配置文件：

{
  "presets": ["@babel/preset-react"]
}

3. 通过babel-node执行脚本：

npx babel-node script.js

或者在package.json中配置启动脚本：

"scripts": {
  "start": "babel-node script.js"
}

之后运行npm start即可

额外建议 #

如果是开发正式React项目，更推荐使用Vite、Create React App这类现代化构建工具，它们会自动处理模块解析、JSX转译等工作，无需手动配置CDN或Babel，效率更高。

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