React项目集成@react-pdf构建失败，请求技术支持

项目代码无修改，昨日构建正常今日失败，定位到@react-pdf依赖问题。报错信息：

./node_modules/@react-pdf/png-js/lib/png-js.browser.es.js 文件第10116行第106列模块解析失败，遇到意外token；该文件已通过babel-loader处理，但仍需额外加载器。

环境信息 #

• Node v14.16.0
• NPM 6.14.11

已尝试操作 #

更换@react-pdf版本，无效果。

项目package.json配置 #

{
  "name": "command-center",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@chakra-ui/icons": "^1.0.11",
    "@chakra-ui/react": "^1.4.1",
    "@emotion/react": "^11.1.5",
    "@emotion/styled": "^11.1.5",
    "@react-pdf/renderer": "2.1.1",
    "@react-pdf/font": "2.2.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "chart.js": "^3.3.0",
    "compressorjs": "^1.0.7",
    "exceljs": "^4.2.1",
    "file-saver": "^2.0.5",
    "framer-motion": "^4.1.11",
    "html-to-image": "^1.6.2",
    "html2canvas": "^1.0.0-rc.7",
    "jspdf": "^2.3.1",
    "query-string": "^7.0.0",
    "react": "^17.0.2",
    "react-chartjs-2": "^3.0.3",
    "react-datepicker": "^3.8.0",
    "react-dom": "^17.0.2",
    "react-google-charts": "^3.0.15",
    "react-icons": "^4.2.0",
    "react-icons-kit": "^2.0.0",
    "react-modern-calendar-datepicker": "^3.1.6",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-to-print": "^2.12.6",
    "web-vitals": "^1.0.1",
    "xlsx": "^0.16.9"
  },
  "resolutions": {
    "@react-pdf/font": "2.2.0"
  },
  "scripts": {
    "start": "set PORT=3143 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

排查解决步骤 #

1. 让babel转译@react-pdf依赖 #

react-scripts默认不处理node_modules内的包，需配置让babel解析@react-pdf相关模块。未eject项目可通过react-app-rewired修改：

• 安装依赖：npm install react-app-rewired customize-cra --save-dev
• 根目录创建config-overrides.js：

  const { override, addBabelLoader } = require('customize-cra');
  
  module.exports = override(
    addBabelLoader({
      test: /\.js$/,
      include: /node_modules\/@react-pdf/,
    })
  );
  

• 修改package.json的scripts：

  "scripts": {
    "start": "set PORT=3143 && react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
  

2. 清理缓存并重装依赖 #

• 删除依赖目录和锁文件：
  Windows：rmdir /s /q node_modules && del package-lock.json
  Mac/Linux：rm -rf node_modules package-lock.json
• 重装依赖：npm install
• 重置react缓存：npm start -- --reset-cache

3. 锁定png-js版本 #

在package.json的resolutions中添加：

"resolutions": {
  "@react-pdf/font": "2.2.0",
  "@react-pdf/png-js": "2.2.0"
}

执行npm install生效。

4. 降级react-scripts版本 #

当前使用的react-scripts 4.0.3可能存在兼容性问题，尝试降级到3.4.4：
npm install react-scripts@3.4.4 --save

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