React项目集成react-pdf报错：Missing class properties transform

这个错误是因为pdfjs-dist（react-pdf的依赖库）使用了ES6+的类静态属性语法，但你的项目Babel配置未支持该语法，或者react-pdf版本与项目环境不兼容。以下是可行的解决方案：

方案一：降级react-pdf到兼容版本 #

最新版react-pdf依赖的pdfjs-dist可能使用了较新的语法，你的编译环境不支持。可以尝试安装一个兼容性更好的旧版本：

npm install react-pdf@5.7.2

安装完成后重新启动项目，检查是否能正常编译。

方案二：配置Babel支持类属性语法 #

如果想保留最新版react-pdf，需要修改Babel配置以支持类静态属性：

1. 安装Babel插件：

npm install --save-dev @babel/plugin-proposal-class-properties

2. 修改Babel配置文件（.babelrc或babel.config.js），添加该插件：

{
  "presets": ["你的现有preset（比如@babel/preset-react）"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

3. 如果你使用的是Create React App（未弹出配置），需要用react-app-rewired来修改配置：
   • 安装依赖：

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

   • 修改package.json中的scripts：

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

   • 在项目根目录创建config-overrides.js文件，内容如下：

     const { override, addBabelPlugin } = require('customize-cra');
     module.exports = override(
       addBabelPlugin('@babel/plugin-proposal-class-properties')
     );
     

4. 重启项目，编译应该能正常进行。

方案三：检查并升级Node/React版本 #

确保你的Node.js版本至少为14.x，React版本在16.8.x以上（如果使用react-pdf v6+版本），较新的环境对ES6+语法支持更好，可能无需额外配置即可解决问题。

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