React 18 + Express服务端渲染报错：Unexpected token '<' 求助

核心原因 #

Node.js 默认无法识别 JSX语法（也就是你代码里的<h1>Hello World</h1>），它会把尖括号判定为非法语法，所以抛出了Unexpected token '<'的错误。直接发送字符串能正常运行，是因为字符串属于Node原生支持的语法，不需要额外转译处理。

解决步骤 #

1. 安装轻量转译工具ESBuild #

ESBuild是快速的JS/TS转译工具，适合处理SSR场景：

npm install esbuild --save-dev

2. 配置启动脚本 #

在package.json中添加构建与启动命令（假设你的服务器代码文件名为server.js）：

{
  "scripts": {
    "build": "esbuild server.js --bundle --platform=node --outfile=dist/server.js",
    "start": "node dist/server.js"
  }
}

3. 补全HTML结构（优化） #

你的SSR代码需要包裹完整的HTML文档结构，否则浏览器可能无法正确解析。修改后的服务器代码示例：

import express from "express"
import React from "react"
import { renderToPipeableStream } from "react-dom/server"

const app = express()

app.get("/", (req, res) => {
  const { pipe } = renderToPipeableStream(
    <html>
      <head>
        <title>SSR Demo</title>
      </head>
      <body>
        <h1>Hello World</h1>
      </body>
    </html>,
    {
      onShellReady() {
        res.setHeader("content-type", "text/html")
        pipe(res)
      },
      onError(err) {
        console.error(err)
        res.status(500).send("Server Error")
      }
    }
  )
})

app.listen(3000, () => {
  console.log("RUNNING..")
})

4. 运行项目 #

先构建转译代码，再启动服务器：

npm run build
npm start

其他可选方案 #

• 使用Babel转译：配置.babelrc开启React与ES模块支持，配合@babel/node直接运行，但速度比ESBuild慢。
• 改用Next.js：如果不想手动配置SSR流程，Next.js是React官方推荐的SSR框架，内置了全套工具链。

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