React 18.2使用react-pdf遇dispatcher.useInsertionEffect报错求助

错误根源 #

你在@react-pdf/renderer的<Document>组件内部使用了MUI的<Typography>组件。MUI底层依赖@emotion/react，它会调用React 18的useInsertionEffect钩子，但react-pdf的PDF渲染引擎运行在独立于浏览器的上下文环境中，无法识别该钩子，因此触发报错。

解决方案 #

react-pdf的文档结构只能使用它自身提供的组件，不能混用第三方UI库组件。将MUI的<Typography>替换为react-pdf自带的<Text>组件，并使用react-pdf的样式系统定义样式：

1. 导入react-pdf的核心组件和样式工具：

import { Document, Page, Text, StyleSheet } from '@react-pdf/renderer';

2. 重新定义SummaryTable组件：

const styles = StyleSheet.create({
  page: {
    padding: 30, // 模拟页面内边距
  },
  text: {
    fontSize: 14, // 自定义文本大小
    fontWeight: 'normal', // 可选：设置字体粗细
    color: '#333', // 可选：设置文本颜色
  },
});

const SummaryTable = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <Text style={styles.text}>Test</Text>
    </Page>
  </Document>
);

3. 保留原有的下载链接逻辑：

return (
  <>
    <PDFDownloadLink document={<SummaryTable />} fileName="somename.pdf">
      {({ blob, url, loading, error }) =>
        loading ? "Loading document..." : "Download now!"
      }
    </PDFDownloadLink>
    <SummaryTable />
  </>
);

额外注意事项 #

• react-pdf提供了一套完整的PDF专用组件（如View、Image、Link等），所有需要渲染到PDF中的内容都必须使用这些组件。
• 样式需通过StyleSheet.create定义，语法类似CSS-in-JS，但仅支持PDF渲染兼容的样式属性（如fontSize、padding、margin等）。

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