React-PDF报错：expected expression, got '<' 求助排查

核心问题 #

你混淆了两个功能完全不同的React PDF库：

• react-pdf：用于在React应用中展示已有的PDF文件
• @react-pdf/renderer：用于在React中生成新的PDF文件

你错误导入了@react-pdf/renderer的StyleSheet，它和react-pdf的展示组件不兼容，导致JSX解析失败，触发「expected expression, got '<'」错误。

分步解决方案 #

1. 清理错误依赖与导入

   • 卸载不需要的@react-pdf/renderer（若仅需展示PDF）：

     npm uninstall @react-pdf/renderer
     # 或 yarn remove @react-pdf/renderer
     

   • 修改App.js，移除@react-pdf/renderer相关代码：

     // App.js
     import './App.css';
     import React from 'react';
     import { Page, Document } from 'react-pdf';
     import samplePDF from "./pdfs/renal.pdf";
     
     function App() {
         return (
             <div>
                 <Document file={samplePDF}>
                     <Page pageNumber={1} />
                 </Document>
             </div>
         )
     }
     
     export default App;
     

2. 移除多余的Babel脚本
   Create React App已内置Babel处理JSX语法，无需手动引入外部脚本，删除index.html中的以下代码：

   <!-- 删掉这一行 -->
   <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
   

3. 优化状态处理（可选）
   为避免混乱的加载提示，可利用react-pdf的回调函数处理状态：

   // App.js 优化版
   import './App.css';
   import React, { useState } from 'react';
   import { Page, Document } from 'react-pdf';
   import samplePDF from "./pdfs/renal.pdf";
   
   function App() {
       const [error, setError] = useState(null);
       const [loading, setLoading] = useState(true);
   
       return (
           <div>
               {loading && <p>Loading PDF...</p>}
               {error && <p>Failed to load PDF: {error.message}</p>}
               <Document 
                   file={samplePDF}
                   onLoadSuccess={() => setLoading(false)}
                   onLoadError={(err) => {
                       setLoading(false);
                       setError(err);
                   }}
               >
                   <Page pageNumber={1} />
               </Document>
           </div>
       )
   }
   
   export default App;
   

验证依赖 #

确保package.json中安装的是正确的react-pdf依赖：

{
  "dependencies": {
    // ...其他依赖
    "react-pdf": "^7.x.x" // 使用最新稳定版
  }
}

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