@react-pdf/renderer报错：Document/Page/View无法作为JSX组件使用

我编写了如下代码：

import ReactPDF, {
  Document,
  Page,
  Font,
  StyleSheet,
  View,
} from '@react-pdf/renderer'
import { Food } from 'foods'
import { Portion } from 'portions'
import { ReactElement } from 'react'
import { StatsTree } from 'stats/calculations/getStatsTree'
import getComputedColorFromChakra from 'theme/getComputedColorFromChakra'
import PdfVariantItem from 'variants/PdfVariantsList/PdfVariantItem'
import { DietForm } from './dietForm'

type Props = {
  dietForm: DietForm
  foodsById: Record<number, Food>
  portionsById: Record<string, Portion>

  dietFormStatsTree: StatsTree
} & ReactPDF.DocumentProps

function PdfDietEditor({
  dietForm,
  foodsById,
  portionsById,
  dietFormStatsTree,
  ...rest
}: Props) {
  const { variantsForms } = dietForm

  const variantItemsElements: ReactElement[] = []

  variantsForms.forEach((variantForm, index) => {
    const { mealsForms } = variantForm
    const { stats, subtrees } = dietFormStatsTree.subtrees[index]

    if (mealsForms.length > 0) {
      variantItemsElements.push(
        <PdfVariantItem
          index={variantItemsElements.length}
          key={variantForm.fieldId}
          variantForm={variantForm}
          stats={stats}
          mealsFormsStatsTrees={subtrees}
          foodsById={foodsById}
          portionsById={portionsById}
        />
      )
    }
  })

  return (
    <Document {...rest}>
      <Page
        style={[
          styles.page,
          { backgroundColor: getComputedColorFromChakra('gray.50') },
        ]}
      >
        <View
          fixed
          style={{
            backgroundColor: getComputedColorFromChakra('teal.500'),
            height: 10,
            alignItems: 'center',
            padding: 4,
            marginBottom: 24,
          }}
        />

        {variantItemsElements}
      </Page>
    </Document>
  )
}

const styles = StyleSheet.create({
  page: {
    fontFamily: 'Roboto',
    paddingBottom: 12,
  },
})

Font.register({
  family: 'Roboto',
  fonts: [
    {
      src: 'https://fontlibrary.org/assets/fonts/roboto/4f8c3c9bbdde908a86daabfe666d2f61/ac3f799d5bbaf5196fab15ab8de8431c/RobotoRegular.ttf',
      fontWeight: 'normal',
    },

    {
      src: 'https://fontlibrary.org/assets/fonts/roboto/4f8c3c9bbdde908a86daabfe666d2f61/fe13e4170719c2fc586501e777bde143/RobotoMedium.ttf',
      fontWeight: 'medium',
    },

    {
      src: 'https://fontlibrary.org/assets/fonts/roboto/4f8c3c9bbdde908a86daabfe666d2f61/d329cc8b34667f114a95422aaad1b063/RobotoBold.ttf',
      fontWeight: 'bold',
    },
  ],
})

export default PdfDietEditor

运行时出现以下错误：

'Document' module can't be used as a JSX component 'Page' module can't be used as a JSX component 'View' module can't be used as a JSX component

使用的版本为："@react-pdf/renderer": "^2.0.19"，已尝试重新安装依赖及升级该模块，但问题仍未解决。

解决方案 #

这类问题大多源于TypeScript类型定义冲突，或者React与@react-pdf/renderer的版本兼容性问题，试试以下几种方法：

1. 跳过库类型检查
   在项目的tsconfig.json中添加或修改skipLibCheck配置：

{
  "compilerOptions": {
    "skipLibCheck": true
  }
}

该配置会忽略第三方库的类型定义错误，直接绕过类型冲突问题，是最快速的临时解决方案。

2. 对齐React与@types/react版本
   确保react和@types/react的版本完全匹配，比如React 17.x对应@types/react@17.x，React 18.x对应@types/react@18.x。版本不匹配会导致JSX组件类型定义冲突。

3. 彻底清理依赖缓存后重装
   执行以下命令清理旧依赖并重新安装：

# 删除依赖目录和锁文件
rm -rf node_modules package-lock.json yarn.lock
# 重新安装依赖
npm install
# 或使用yarn
yarn install

4. 调整导入方式
   移除ReactPDF的整体导入，仅导入需要的组件：

import { Document, Page, Font, StyleSheet, View, DocumentProps } from '@react-pdf/renderer'

同时修改Props类型定义：

type Props = {
  // ... 原有属性
} & DocumentProps

避免整体导入可能带来的类型污染问题。

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