React中用react-pdf读取PDF页数遇#字符解析错误求解决

问题原因 #

错误中的 static #docId = 0; 是 ES6+ 的私有类字段语法，你的 Babel 配置未正确处理该语法，导致 babel-loader 无法解析。

解决方案 #

1. 升级 Babel 依赖并配置私有类字段支持 #

• 安装必要的 Babel 插件：

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

• 在 Babel 配置文件（如 .babelrc 或 babel.config.js）中添加插件：

{
  "presets": ["react-app"],
  "plugins": [
    "@babel/plugin-proposal-private-property-in-object",
    "@babel/plugin-proposal-private-methods"
  ]
}

2. 调整 react-pdf 导入路径 #

尝试使用标准导入方式，避免直接引用 webpack 入口：

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

若仍有问题，改用 legacy 版本入口：

import { Document, Page } from "react-pdf/dist/entry.legacy";

3. 降级 pdfjs-dist 版本 #

若上述方法无效，可降级到不使用私有类字段的旧版本：

npm install pdfjs-dist@2.16.105 --save

注意：降级会丢失新版本功能，需权衡使用。

4. 调整 Webpack 配置（手动配置场景） #

确保 babel-loader 处理 node_modules/pdfjs-dist 目录（默认可能排除 node_modules，需添加例外）：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules(?!\/pdfjs-dist)/,
        use: 'babel-loader'
      }
    ]
  }
};

内容的提问来源于stack exchange，提问作者Muhammad Hasnain Tariq