Next.js 13.5.4服务器动作中使用react-pdf生成PDF报错求助

这个错误是因为@react-pdf/renderer与Next.js服务器动作的运行环境不兼容，或是React实例未被正确识别导致的。以下是具体修复步骤：

1. 强制使用Node.js Runtime #

Next.js服务器动作默认可能使用Edge Runtime，而@react-pdf/renderer依赖Node.js环境的API，不支持Edge环境。在服务器动作文件顶部添加代码强制指定运行环境：

"use server";
export const runtime = 'nodejs'; // 新增该行
import React from "react";
import { Page, Text, Document, renderToBuffer } from "@react-pdf/renderer";

// 其余代码保持不变
const MyDocument = () => (
  <Document>
    <Page>
      <Text>React-pdf</Text>
    </Page>
  </Document>
);

export const createPdf = async () => {
  await renderToBuffer(<MyDocument />);
};

2. 确保文件扩展名正确 #

服务器动作文件必须使用.jsx或.tsx扩展名，这样Next.js才能正确编译JSX语法。如果你的文件是.js，请改为.jsx。

3. 修复客户端组件语法错误 #

你提供的客户端组件代码存在语法错误，多余的冒号需要删除：

const onSubmit = async (data) => {
  await createPdf();
};

4. 验证依赖兼容性（可选） #

如果上述步骤无效，可删除现有依赖文件重新安装，确保@react-pdf/renderer与React 18.2.0（Next.js 13.5.4对应版本）兼容：

rm -rf node_modules package-lock.json
npm install

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