安装pdfjs-dist后执行npm start遇SyntaxError：缺少类属性转换

问题重现 #

安装pdfjs-dist并引入后，项目运行时抛出以下语法错误：

./node_modules/pdfjs-dist/build/pdf.js
SyntaxError: /Users/XXXXXXXXXXX/Documents/dev/XXXXXXXXXXX/node_modules/pdfjs-dist/build/pdf.js:Missing class properties transform.
  2880 |   #isEditing = false;
  2881 |   #isInEditMode = false;
> 2882 |   _uiManager = null;
       |   ^^^^^^^^^^^^^^^^^^
  2883 |   #zIndex = AnnotationEditor._zIndex++;
  2884 |   static _colorManager = new _tools.ColorManager();
  2885 |   static _zIndex = 1;

环境信息 #

• Node v12.22.12
• react "16.12.0"
• react-dom "16.12.0"

已尝试操作 #

已安装@babel/plugin-proposal-class-properties，并配置.babelrc如下，但问题未解决：

{
  "presets": ["@babel/env", "@babel/preset-typescript"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

解决方法 #

1. 让Babel转译pdfjs-dist模块 #

默认Babel会跳过node_modules目录的转译，但新版本pdfjs-dist使用了未转译的类属性语法，需手动指定让Babel处理该模块：
修改.babelrc，添加include字段：

{
  "presets": ["@babel/env", "@babel/preset-typescript"],
  "plugins": ["@babel/plugin-proposal-class-properties"],
  "include": ["node_modules/pdfjs-dist"]
}

如果是Create React App创建的项目，默认无法直接修改Babel配置，需借助react-app-rewired和customize-cra：

• 安装依赖：

npm install react-app-rewired customize-cra --save-dev

• 在项目根目录创建config-overrides.js：

const { override, babelInclude } = require('customize-cra');
const path = require('path');

module.exports = override(
  babelInclude([
    path.resolve(__dirname, 'src'),
    path.resolve(__dirname, 'node_modules/pdfjs-dist')
  ])
);

• 修改package.json中的启动脚本：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

2. 降级pdfjs-dist到兼容版本 #

高版本pdfjs-dist使用的JS语法与你的旧环境（Node12、React16）不兼容，可降级到v2.x系列的稳定版本：

npm install pdfjs-dist@2.16.105

3. 补充Babel插件支持私有字段语法 #

错误中同时出现了私有字段（#isEditing）和公共实例字段（_uiManager = null），仅@babel/plugin-proposal-class-properties不足以支持私有字段，需补充安装相关插件：

• 安装插件：

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

• 更新.babelrc配置：

{
  "presets": ["@babel/env", "@babel/preset-typescript"],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-private-property-in-object",
    "@babel/plugin-proposal-private-methods"
  ],
  "include": ["node_modules/pdfjs-dist"]
}

4. 明确@babel/env的目标环境 #

在.babelrc中为@babel/env指定目标环境，确保转译后的代码适配你的Node和浏览器版本：

{
  "presets": [
    ["@babel/env", {
      "targets": {
        "node": "12.22.12",
        "browsers": ["last 2 versions", "ie 11"]
      }
    }],
    "@babel/preset-typescript"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-private-property-in-object",
    "@babel/plugin-proposal-private-methods"
  ],
  "include": ["node_modules/pdfjs-dist"]
}

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