React项目执行node命令报SyntaxError: Unexpected token '<'如何解决

错误原因 #

你写的App.js包含React专属的JSX语法，Node.js原生不支持识别这类标签语法。你在localhost:3000能正常运行，是因为React脚手架（比如Create React App）内置的Babel工具已经自动把JSX转译成了普通JavaScript代码；而你直接用node fileName.js执行原始源文件时，Node碰到<div这类JSX标签无法解析，就会抛出语法错误。

解决方案 #

优先推荐：浏览器端调试 #

你写的React组件本身就是运行在浏览器环境的，不需要通过Node执行来查看console.log输出：

• 启动React开发服务，打开http://localhost:3000
• 按F12或者Ctrl+Shift+I打开浏览器开发者工具，切换到「控制台」标签页
• 所有你在React代码中写的console.log输出都会直接显示在这里，还支持打断点、查看组件状态等调试能力，比终端调试更适配前端代码场景。

方案2：使用babel-node转译后执行 #

如果你确实需要在终端执行带JSX的JS文件，可以通过babel-node做实时转译：

1. 安装依赖：

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

2. 在项目根目录新建.babelrc配置文件，内容如下：

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

3. 执行文件时用npx babel-node替代原生node命令即可：

npx babel-node src/App.js

注意：如果你的文件里引用了CSS、图片等非JS静态资源，该方案依然会报错，Node本身不支持处理这类前端资源。

方案3：抽离纯逻辑单独测试 #

如果只是要调试业务逻辑（比如食谱数据的排序、过滤、计算逻辑），建议你把这部分代码抽成不包含JSX、不引用静态资源的独立JS文件，这类文件可以直接用node命令执行调试，效率更高。

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