安装react-pdf后Electron React应用无法通过electron-builder构建

• 重新构建canvas适配Electron环境
  react-pdf依赖的canvas需要匹配Electron的Node版本，执行以下命令（替换<你的Electron版本>为实际版本，比如28.0.0）：

npm rebuild canvas --build-from-source --runtime=electron --target=<你的Electron版本> --dist-url=https://electronjs.org/headers

• 配置electron-builder打包规则
  在package.json的build字段中添加以下配置，确保canvas的二进制文件被正确打包：

"build": {
  "extraResources": [
    {
      "from": "node_modules/canvas/build/Release/",
      "to": "./",
      "filter": ["*.node"]
    }
  ],
  "npmRebuild": false,
  "electronRebuild": true
}

• 清理缓存后重装依赖
  先清理旧依赖和缓存文件，再重新安装：

rm -rf node_modules package-lock.json yarn.lock
npm install

完成后再次执行第一步的canvas重建命令，再尝试构建。

• 检查系统层面依赖
  canvas的构建依赖系统库，需确保对应系统已安装：

  • Linux：sudo apt-get install libcairo2-dev libjpeg-dev libpango1.0-dev libgif-dev build-essential g++
  • Mac：安装Xcode Command Line Tools（xcode-select --install）
  • Windows：安装Visual Studio Build Tools（勾选"Desktop development with C++"）和Python 3.x

• 锁定canvas稳定版本
  若最新版canvas兼容性有问题，可在package.json中指定稳定版本，比如：

"dependencies": {
  "canvas": "^2.11.2",
  // 其他依赖...
}

然后重新执行依赖安装和canvas重建步骤。

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