服务端使用react-pdf运行express时出现Document语法报错如何解决？

Node.js 原生不支持解析 JSX 语法，你在服务端直接编写包含 <Document> 等 React 标签的代码时，Node 的 CommonJS 模块加载器无法识别 JSX 语法，因此抛出无效标记的语法错误。

提供两种可直接落地的实现方案，按需选择即可：

方案1：通过 Babel 转译代码（通用场景推荐） #

• 安装所需开发依赖
  npm install @babel/core @babel/cli @babel/preset-env @babel/preset-react @babel/node --save-dev
• 项目根目录新建 .babelrc 配置文件，写入以下内容：

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

• 调整启动命令：
  • 开发环境将原来的 node server.js 启动命令替换为 babel-node server.js
  • 生产环境先执行 babel 源码目录 --out-dir 输出目录 完成代码转译，再用 node 输出目录/入口文件.js 启动服务

方案2：使用 React.createElement 编写组件（无需转译，适合简单PDF场景） #

如果不想引入额外的转译流程，可以直接用 React 原生方法替代 JSX 写法，示例如下：

const React = require('react');
const { Document, Page, Text, renderToStream } = require('@react-pdf/renderer');

// 替换原来的JSX写法
const MyPdf = React.createElement(
  Document,
  null,
  React.createElement(
    Page,
    null,
    React.createElement(Text, null, 'PDF测试内容')
  )
);

// Express路由调用示例
app.get('/pdf', async (req, res) => {
  const stream = await renderToStream(MyPdf);
  res.setHeader('Content-Type', 'application/pdf');
  stream.pipe(res);
});

修改完成后重启服务即可正常生成PDF，不会再抛出对应语法错误。

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