使用@react-pdf-viewer/core依赖pdfjs-dist时遇模块解析错误求解决

错误原因 #

你遇到的Unexpected token错误源于pdfjs-dist中使用了ES2022静态类字段语法（static CSS = 96.0），而当前项目的babel配置未支持该特性，导致webpack无法解析这段代码。

解决方案 #

方案1：升级react-scripts到5.x版本 #

react-scripts 5.x默认支持ES2022语法，适配React 17：

npm install react-scripts@latest
# 或使用yarn
yarn add react-scripts@latest

安装完成后重启项目即可。

方案2：通过craco扩展babel配置（不升级react-scripts） #

如果不想升级react-scripts，可借助craco修改babel配置以支持静态类字段：

1. 安装craco及babel插件：

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

2. 在项目根目录创建craco.config.js：

module.exports = {
  babel: {
    plugins: ["@babel/plugin-proposal-class-properties"]
  }
};

3. 修改package.json中的scripts命令，替换为craco：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

4. 重启项目。

方案3：降级pdfjs-dist版本（不推荐） #

查找与@react-pdf-viewer/core@3.7.0兼容且未使用ES2022语法的pdfjs-dist版本，但此方法可能引发其他兼容性问题，建议优先尝试前两种方案。

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