react-pdf导入PDFViewer报错：无默认导出及模块未找到问题

报错原因 #

你遇到的问题核心是react-pdf版本迭代导致的包结构和导出规则变更：

• react-pdf从v4版本开始拆分了功能包：原react-pdf仅保留PDF文件展示能力，导出Document、Page等组件，不再包含PDFViewer；
• PDFViewer属于PDF生成类组件，被迁移到独立的@react-pdf/renderer作用域包中，旧的react-pdf/renderer导入路径已完全失效；
• 若你安装的是v4+版本，仍按旧版本文档的导入方式，必然会出现找不到导出或模块的错误。

解决方法 #

根据你的实际需求选择对应方案：

需求1：展示已有PDF文件（本地/远程） #

不需要使用PDFViewer，直接用react-pdf包的原生展示组件：

1. 确保已安装react-pdf：npm install react-pdf
2. 正确导入组件：

   import { Document, Page } from 'react-pdf';
   

3. 基础使用示例：

   function PDFDisplay() {
     return (
       <div style={{ width: '100%', height: '80vh' }}>
         <Document file="/your-pdf-file.pdf">
           <Page pageNumber={1} />
         </Document>
       </div>
     );
   }
   

需求2：生成自定义PDF内容 #

如果需要用React组件生成PDF并预览，需安装专用的生成包：

1. 卸载不需要的旧包（若已安装）：npm uninstall react-pdf
2. 安装@react-pdf/renderer：npm install @react-pdf/renderer
3. 正确导入PDFViewer及相关组件：

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

4. 基础使用示例：

   function PDFGenerator() {
     return (
       <PDFViewer style={{ width: '100%', height: '80vh' }}>
         <Document>
           <Page>
             <Text style={{ fontSize: 20, textAlign: 'center' }}>自定义PDF内容</Text>
           </Page>
         </Document>
       </PDFViewer>
     );
   }
   

需求3：坚持使用旧版本的PDFViewer展示PDF #

若依赖旧版本的API逻辑，可降级到react-pdf v3.x版本：

1. 卸载当前版本：npm uninstall react-pdf
2. 安装指定旧版本：npm install react-pdf@3.0.0
3. 按旧方式导入：

   import { PDFViewer } from 'react-pdf';
   

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