升级react-pdf至6.2.1后出现Module parse failed错误求助

React项目使用react-pdf展示PDF文件，通过Storybook运行。将react-pdf从4.1.0版本升级至6.2.1后，启动Storybook时出现如下错误：

ERROR in ./node_modules/pdfjs-dist/build/pdf.js 1413:9
Module parse failed: Unexpected character '#' (1413:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| class PDFDocumentLoadingTask {
>   static #docId = 0;
|
|   constructor() {
 @ ./node_modules/react-pdf/dist/esm/entry.webpack.js 1:0-46 9:0-25 10:0-42

使用的依赖版本：

• react: 16.12.0
• react-dom: 16.12.0
• react-pdf: 6.2.1
• typescript: 3.7.2
• @storybook/react: ^6.1.21
• Node版本：14

报错中的#docId是ES私有类字段语法，react-pdf 6.x依赖的pdfjs-dist版本使用了该语法，但当前Storybook（6.1.x）默认的webpack配置未对node_modules下的pdfjs-dist文件启用转译，导致webpack无法解析该语法。

方案1：修改Storybook的webpack配置，转译pdfjs-dist #

在项目根目录的.storybook/main.js中，添加webpack配置规则，让babel-loader处理pdfjs-dist文件：

module.exports = {
  // 保留原有配置...
  webpackFinal: async (config) => {
    // 找到babel-loader规则并扩大处理范围
    const babelRule = config.module.rules.find(rule => rule.test.toString() === '/\\.(mjs|jsx?)$/');
    if (babelRule) {
      babelRule.include.push(/node_modules\/pdfjs-dist/);
    }
    return config;
  },
};

同时确保babel配置文件（.babelrc或babel.config.js）中启用了私有类字段转译插件：

{
  "presets": ["@babel/preset-react", "@babel/preset-typescript"],
  "plugins": ["@babel/plugin-proposal-private-class-fields"]
}

若未安装该插件，先执行安装命令：

npm install @babel/plugin-proposal-private-class-fields --save-dev

方案2：升级Storybook版本 #

Storybook 6.4+版本默认使用webpack5，对ES新语法支持更完善，无需额外配置即可解析私有类字段。执行升级命令：

npx sb upgrade

注意升级后需检查配置是否适配React 16版本。

方案3：降级pdfjs-dist版本（临时方案） #

若以上方案无法实施，可手动指定兼容的pdfjs-dist版本（需与react-pdf 6.x匹配）：

npm install pdfjs-dist@2.16.105 --save

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