如何在Express中配置preact-render-to-string并解决运行报错问题

云上老周

2026-10-6

问题原因

你遇到的Unexpected token '<'报错，核心原因是Node.js原生不支持JSX语法，你代码里写的/** @jsx h */是给Babel等转译工具识别的注释，Node本身不会处理这类语法，所以直接运行node app.js会把JSX里的<识别为非法字符。

解决方案1：使用Babel转译JSX（和官方示例用法一致）

不需要修改原有业务代码，只需要补充转译配置即可：

第一步：安装所需开发依赖
运行命令：npm install --save-dev @babel/core @babel/node @babel/preset-env @babel/plugin-transform-react-jsx
第二步：项目根目录新建babel.config.json配置文件，写入以下内容：

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    ["@babel/plugin-transform-react-jsx", {
      "pragma": "h",
      "pragmaFrag": "Fragment"
    }]
  ]
}

第三步：修改package.json的scripts字段，新增启动命令：

"scripts": {
  "start": "babel-node app.js",
  "test": "echo \"Error: no test specified\" && exit 1"
}

第四步：运行npm start启动项目，访问http://localhost:8080/任意字符即可看到渲染结果。

解决方案2：无转译直接运行（使用htm库）

如果不想配置转译工具，可以用preact官方推荐的htm库替代JSX语法，无需额外配置直接在Node环境运行：

第一步：安装htm依赖
运行命令：npm install htm
第二步：修改app.js代码为以下内容：

import express from 'express';
import { h } from 'preact';
import render from 'preact-render-to-string';
import htm from 'htm';

// 绑定h方法到htm，替代JSX
const html = htm.bind(h);

// 组件改用html模板字符串编写
const Fox = ({ name }) => html`
    <div class="fox">
        <h5>${ name }</h5>
        <p>This page is all about ${name}.</p>
    </div>
`;

const app = express();
app.listen(8080);

app.get('/:fox', (req, res) => {
    // 渲染时同样用html模板
    let htmlContent = render(html`<Fox name=${req.params.fox} />`);
    res.send(`<!DOCTYPE html><html><body>${htmlContent}</body></html>`);
});