集成@react-pdf/renderer时遇Uncaught TypeError: module.runSetters is not a function错误

错误说明 #

控制台抛出Uncaught TypeError: module.runSetters is not a function异常，代码中直接将<Document>组件放在DOM容器<div>内渲染。

常见原因及解决办法 #

1. 错误的组件渲染方式 #

@react-pdf的<Document>不是普通DOM组件，不能直接挂载到DOM节点上，必须使用专用渲染容器：

改为预览模式（用PDFViewer）

import React from "react";
import {
  Page,
  Text,
  View,
  Document,
  PDFViewer
} from "@react-pdf/renderer";

const Index = () => {
  return (
    <div>
      <PDFViewer style={{ width: '100%', height: '800px' }}>
        <Document>
          <Page>
            <View>
              <Text>Nombre 1</Text>
              <Text>Nombre 2</Text>
              <Text>Nombre 3</Text>
            </View>
          </Page>
        </Document>
      </PDFViewer>
    </div>
  )
}
export default Index;

或改为下载链接模式

import React from "react";
import {
  Page,
  Text,
  View,
  Document,
  PDFDownloadLink
} from "@react-pdf/renderer";

const MyDocument = () => (
  <Document>
    <Page>
      <View>
        <Text>Nombre 1</Text>
        <Text>Nombre 2</Text>
        <Text>Nombre 3</Text>
      </View>
    </Page>
  </Document>
);

const Index = () => {
  return (
    <div>
      <PDFDownloadLink document={<MyDocument />} fileName="my-document.pdf">
        {({ blob, url, loading, error }) => loading ? 'Generating PDF...' : 'Download PDF'}
      </PDFDownloadLink>
    </div>
  )
}
export default Index;

2. React与@react-pdf版本不兼容 #

不同版本的@react-pdf对React版本有要求，比如v2.x需要React 16.8+，v3.x需要React 18+。可以：

• 查看@react-pdf/renderer的package.json确认兼容版本
• 调整React版本：

  # 升级到React 18（适配@react-pdf v3.x）
  npm install react@^18.2.0 react-dom@^18.2.0
  # 或降级@react-pdf到v2.x（适配React 16/17）
  npm install @react-pdf/renderer@^2.2.0
  

• 清理依赖后重装：

  rm -rf node_modules package-lock.json
  npm install
  

3. 项目依赖冲突 #

如果上述方法无效，尝试在全新的React项目中单独集成@react-pdf，验证是否是现有项目的babel、webpack配置或其他依赖导致的冲突。

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