React中pdfjs-dist在Safari 14.1.2显示空白页的解决方法咨询

问题根源：你使用的pdfjs-dist 2.16.105版本代码中包含了私有类语法（如#ensureObj），而Safari 14.5之前的版本不支持该语法，导致应用启动时报错空白。

以下是具体解决办法：

办法一：降级pdfjs-dist到兼容版本 #

• 选择pdfjs-dist 2.10.x及更早版本（这类版本未引入私有类语法），例如安装2.10.377：

  npm install pdfjs-dist@2.10.377
  

• 同步调整worker引入逻辑（旧版本worker路径与新版本一致，可沿用现有代码，但需确保版本匹配）：

  import * as PDFJS from "pdfjs-dist";
  import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";
  
  PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker;
  

• 验证核心PDF渲染逻辑：getDocument、getPage、render等API在旧版本中完全兼容，无需修改业务代码。

办法二：通过Babel转译pdfjs-dist代码（不降级方案） #

• 配置Babel将node_modules中的pdfjs-dist纳入转译范围（默认Babel不处理第三方包）：
  • 若使用Create React App，需借助craco或react-app-rewired修改配置，示例craco.config.js：

    module.exports = {
      babel: {
        loaderOptions: {
          include: [/node_modules\/pdfjs-dist/],
        },
      },
    };
    

• 安装Babel私有语法转译插件：

  npm install @babel/plugin-proposal-private-methods @babel/plugin-proposal-private-property-in-object --save-dev
  

• 在Babel配置中启用插件，示例babel.config.js：

  module.exports = {
    presets: ['react-app'],
    plugins: [
      '@babel/plugin-proposal-private-methods',
      '@babel/plugin-proposal-private-property-in-object'
    ]
  };
  

• 注意：转译第三方包会增加构建时长，需测试转译后代码的稳定性。

办法三：优化Worker加载方式（辅助方案） #

• 改用CDN加载worker，避免本地worker代码的语法兼容问题：

  PDFJS.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${PDFJS.version}/pdf.worker.min.js`;
  

修改完成后，在Safari 14.1.2中重启应用，检查控制台是否消除语法错误，验证PDF导入功能是否正常运行。

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