React中使用react-pdf加载Firebase存储PDF失败的问题排查

初始方案（react-pdf） #

依赖版本 #

• @react-pdf/renderer: ^3.0.0
• react-pdf: ^5.7.2

报错信息 #

1. Uncaught SyntaxError: Unexpected token '<' (at pdf.worker.js:1:1)
2. Error: Setting up fake worker failed: "Cannot read properties of undefined (reading 'WorkerMessageHandler')" (at api.js:2285:1)

组件代码 #

import { Document } from 'react-pdf'

function PDFPage() {
  return (
    <div>
      <Document file={{
      url:
        'https://firebasestorage.googleapis.com/v0/b/url-for-project-search.appspot.com/o/pdfs%2F%23000001.pdf?alt=media&token=94b5fb97',
    }} onLoadError={console.error} >
      </Document>
    </div>
  );
}

export default PDFPage;

疑问 #

• 是否需要从Document的子组件加载文件？
• 第一个错误中node模块的语法错误由何导致？

替代方案（@react-pdf-viewer/core） #

报错信息 #

1. CORS政策阻止从http://localhost:3000访问Firebase存储资源，请求资源无Access-Control-Allow-Origin头
2. TypeError: Cannot read properties of undefined (reading 'message')

组件代码 #

import { Worker, Viewer } from '@react-pdf-viewer/core';

function PDFPage() {
  return (
    <div style= {{height:550}}>
    <Worker workerUrl="https://unpkg.com/pdfjs-dist@2.5.207/build/pdf.worker.min.js">
        <Viewer fileUrl="https://firebasestorage.googleapis.com/v0/b/id-to-rearource" />

    ...
    </Worker>
    </div>
  );
}

export default PDFPage;

针对react-pdf的错误 #

1. Unexpected token '<' 错误原因：pdf.worker.js加载失败，返回的是HTML（通常是404页面），解析时触发语法错误。核心问题是**@react-pdf/renderer和react-pdf是两个独立包，混用会导致版本冲突**，且react-pdf@5.x不需要依赖前者。
   • 解决步骤：
     • 卸载@react-pdf/renderer：执行命令 npm uninstall @react-pdf/renderer
     • 给Document添加Page子组件（Document仅为容器，必须搭配Page才能渲染PDF内容），修正后代码：

       import { Document, Page } from 'react-pdf';
       import { useState } from 'react';
       
       function PDFPage() {
         const [numPages, setNumPages] = useState(null);
       
         const handleLoadSuccess = ({ numPages }) => setNumPages(numPages);
       
         return (
           <div>
             <Document
               file={{
                 url: 'https://firebasestorage.googleapis.com/v0/b/url-for-project-search.appspot.com/o/pdfs%2F%23000001.pdf?alt=media&token=94b5fb97',
               }}
               onLoadSuccess={handleLoadSuccess}
               onLoadError={console.error}
             >
               {numPages && Array.from({ length: numPages }, (_, i) => (
                 <Page key={`page-${i+1}`} pageNumber={i+1} />
               ))}
             </Document>
           </div>
         );
       }
       
       export default PDFPage;
       

     • 若仍有worker加载问题，手动指定worker资源路径：

       import { pdfjs } from 'react-pdf';
       pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;
       

2. Setting up fake worker failed 错误：完全由版本冲突导致，卸载@react-pdf/renderer后即可解决。

针对@react-pdf-viewer/core的错误 #

1. CORS错误：需给Firebase存储配置CORS规则，允许本地开发域名访问。
   • 操作步骤：
     1. 创建cors.json文件，内容如下：

        [
          {
            "origin": ["http://localhost:3000"],
            "method": ["GET"],
            "maxAgeSeconds": 3600
          }
        ]
        

     2. 使用Firebase CLI执行命令：firebase storage:rules:set cors.json（确保已登录并关联目标项目）
2. TypeError: Cannot read properties of undefined (reading 'message')：你的代码中fileUrl不完整，需替换为完整的PDF资源URL（和react-pdf中可访问的URL一致）。

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