Electron-forge Webpack打包后报Uncaught ReferenceError: require is not defined

这个问题的核心原因是Webpack打包渲染进程产物时错误保留了Node环境的require语法，而Electron渲染进程默认关闭nodeIntegration，浏览器原生环境没有全局require方法，所以触发报错，开发环境正常是因为dev模式下默认的配置会做特殊兼容。以下是可落地的排查和解决方案：

1. 修正渲染进程Webpack的target配置 #

确认渲染进程对应的Webpack配置中显式指定了正确的target：

// webpack.renderer.config.js
module.exports = {
  // 可选web或electron-renderer，web兼容性更强，electron-renderer会做Electron环境的特殊适配
  target: 'web',
  // 其余原有配置
}

如果使用electron-forge的默认Webpack模板，要在forge.config.js的webpack配置项中强制指定渲染进程target，避免默认配置被隐式覆盖。

2. 清理渲染进程代码中的Node模块引用 #

不要在React业务代码（渲染进程侧）直接引入fs、path等Node核心模块，所有Node能力的调用都要放到主进程或者preload脚本中，通过contextBridge暴露给渲染进程使用。如果渲染进程代码里遗留了直接引入Node模块的语句，Webpack不会把这类模块打包到前端产物中，会直接保留require('xxx')语句触发报错。

3. 调整preload脚本的打包配置 #

如果你的preload脚本也走Webpack打包，要单独配置对应的打包规则，和渲染进程配置区分开：

// webpack.preload.config.js
module.exports = {
  target: 'electron-preload',
  output: {
    libraryTarget: 'commonjs2'
  },
  // 其余原有配置
}

preload脚本运行在Electron的隔离上下文环境中，本身有权限调用require，所以配置规则和纯前端的渲染进程不一样。

4. 排查第三方依赖的兼容性 #

部分第三方包是仅针对Node环境开发的，内部会直接调用require语法，如果你在渲染进程中引入了这类包也会触发报错。可以通过Webpack的externals配置把这类依赖排除，放到preload脚本里暴露给渲染进程使用，或者替换为支持浏览器环境的同功能包。

你也可以接入Webpack产物分析插件，打包后定位报错的index.js:2、compat:2对应的具体代码来源，能更快定位到是配置问题还是某个依赖的问题。

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