React-Pdf渲染报错：Uncaught TypeError无法读取undefined的prototype属性

报错信息 #

Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')
    at Object.inherits2 [as inherits] (@react-pdf_renderer.js?v=2aabb8bf:122:50)
    at ../../node_modules/blob-stream/index.js (@react-pdf_renderer.js?v=2aabb8bf:770:10)
    at __require2 (chunk-LK32TJAX.js?v=2aabb8bf:18:50)
    at ../../node_modules/@react-pdf/renderer/lib/react-pdf.cjs.js (@react-pdf_renderer.js?v=2aabb8bf:163313:22)
    at __require2 (chunk-LK32TJAX.js?v=2aabb8bf:18:50)
    at @react-pdf_renderer.js?v=2aabb8bf:163656:16

解决步骤 #

• 校验版本兼容性：确保@react-pdf/renderer版本与当前React版本匹配，React 18建议使用v3.x及以上版本。
• 重置依赖环境：删除node_modules文件夹和package-lock.json/yarn.lock，执行npm install或yarn install重新安装依赖，避免缓存冲突。
• 补充Node.js核心模块polyfill：该错误多因浏览器环境缺失util等Node核心模块，根据构建工具配置：
  • Webpack：在配置文件中添加fallback配置，同时安装对应依赖

    resolve: {
      fallback: {
        util: require.resolve('util/'),
        stream: require.resolve('stream-browserify'),
        buffer: require.resolve('buffer/')
      }
    }
    

    执行命令：npm install util stream-browserify buffer --save-dev
  • Vite：安装vite-plugin-node-polyfills并配置

    import { nodePolyfills } from 'vite-plugin-node-polyfills';
    export default {
      plugins: [nodePolyfills()]
    }
    

• 检查构建规则：确认打包工具的Tree Shaking等规则未误删React-PDF依赖的必要模块。

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