使用require加载React模块失败，JSX语法报错求助

核心原因 #

Node.js默认无法解析JSX语法，直接用require加载包含JSX的文件时，会把它当成普通JavaScript解析，遇到<就触发语法错误。同时你不能启用ES模块（type:module），所以得从CommonJS环境下的转译或打包入手。

具体解决步骤 #

1. 用Babel转译JSX #

这是最通用的方案，让Node能识别JSX：

• 安装Babel依赖：

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

• 在项目根目录创建.babelrc文件：

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

• 修改启动脚本，让Node在加载文件前先通过Babel转译：
  在package.json的scripts里把start改成：

  "start": "node -r @babel/register server.js"
  

  或者在server.js的最顶部添加：

  require('@babel/register')({
    presets: ['@babel/preset-react']
  });
  

2. 统一React和ReactDOM版本 #

你的依赖里react是16.14.0，react-dom是18.2.0，版本不兼容可能引发额外问题。建议统一版本：

• 要么降级react-dom到16.x：

  npm install react-dom@16.14.0 --save
  

• 要么升级react到18.x，同时把ReactDOM.render改成18的写法：

  const root = ReactDOM.createRoot(rootElement);
  root.render(<App />);
  

3. 用打包工具处理前端代码 #

如果game.js是前端页面的脚本，不应该让Node直接加载它，而是用打包工具（比如react-scripts或webpack）把它转译成浏览器能识别的JS：

• 把game.js放到src目录下，修改入口为它，然后运行npm run build，生成的build目录里的文件放到Express的静态资源目录中，用express.static提供访问。

4. 手动替换JSX为React.createElement（应急方案） #

如果不想配置Babel或打包工具，可以把JSX转换成原生React API写法，比如：

// 原JSX
<div className="app">
  <CombinationLock />
</div>

// 转换成React.createElement
React.createElement('div', { className: 'app' },
  React.createElement(CombinationLock)
)

这种方式不用转译，但代码可读性差，适合小范围使用。

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