Electron+React+Webpack打包后运行报错：document is not defined

我的应用在开发模式下基于React、Webpack和Electron运行完全正常，但使用electron-builder打包并运行安装后的应用时，出现了ReferenceError: document is not defined错误。我尝试了网上能找到的所有方法但都无效，以下是我的package.json配置：

{
  "name": "contego-investigative-services",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "build": "webpack --config=webpack.common.js",
    "package": "electron-builder build --win -c.extraMetadata.main=build/app.bundle.js --publish never",
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --config webpack.common.js --watch",
    "start": "electron ."
  },
  "build": {
    "productName": "CONTENGO Investigative Services",
    "appId": "CONTENGO Investigative Services",
    "win": {
      "target": [
        "nsis"
      ],
      "icon": "icon.ico"
    },
    "nsis": {
      "oneClick": false,
      "installerIcon": "icon.ico",
      "uninstallerIcon": "icon.ico",
      "uninstallDisplayName": "Uninstall CONTENGO Investigative Services",
      "license": "license.md",
      "allowToChangeInstallationDirectory": true
    },
    "files": [
      "build/**/*",
      "node_modules/**/*"
    ],
    "asarUnpack": [
      "node_modules/ffmpeg-static/bin/${os}/${arch}/ffmpeg",
      "node_modules/ffmpeg-static/index.js",
      "node_modules/ffmpeg-static/package.json"
    ]
  },
  "engine": {
    "node": "v18.7.0"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/davidchavezTech/trackops-rebuild.git"
  },
  "author": "David Chavez Tech",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/davidchavezTech/trackops-rebuild/issues"
  },
  "homepage": "https://github.com/davidchavezTech/trackops-rebuild#readme",
  "dependencies": {
    "axios": "^1.1.3",
    "caniuse-lite": "^1.0.30001451",
    "ffmpeg-static": "^5.1.0",
    "ffprobe-static": "^3.1.0",
    "fluent-ffmpeg": "^2.1.2",
    "latest": "^0.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.18.10",
    "@babel/preset-env": "^7.18.10",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^8.2.5",
    "css-loader": "^6.7.1",
    "electron": "^20.0.1",
    "electron-build": "^0.0.3",
    "electron-reload": "^2.0.0-alpha.1",
    "file-loader": "^6.2.0",
    "sass": "^1.54.3",
    "sass-loader": "^13.0.2",
    "styles-loader": "^4.0.1",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  }
}

解决方案 #

1. 修正打包脚本的主进程入口

你的打包脚本里通过-c.extraMetadata.main=build/app.bundle.js把主进程入口改成了Webpack打包后的渲染进程代码，而主进程是Node环境，不存在document对象。修改package脚本：

"package": "electron-builder build --win --publish never"

确保package.json的main字段始终指向主进程文件main.js，不要被覆盖。

2. 完善electron-builder的文件包含配置

在build.files中添加主进程文件main.js，确保打包时包含正确的主进程入口：

"files": [
  "main.js",
  "build/**/*",
  "node_modules/**/*"
]

3. 确认Webpack仅处理渲染进程代码

Webpack的配置应该只针对React渲染进程代码，输出到build/app.bundle.js，主进程main.js不需要被Webpack打包（除非你单独配置了主进程的打包规则，此时要分开两个Webpack配置文件，分别处理主进程和渲染进程）。

4. 检查主进程代码

确保main.js中没有导入渲染进程的代码，也没有调用document、window等浏览器环境特有的API——主进程运行在Node环境，只能使用Node和Electron主进程的API。

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