升级Electron后报Uncaught ReferenceError: global is not defined

问题原因 #

你遇到的Uncaught ReferenceError: global is not defined报错由两个因素共同导致：

• Electron 12及以上版本默认关闭渲染进程的Node.js集成，同时默认开启上下文隔离，Node环境的global全局变量不会被注入到渲染进程的全局作用域
• Webpack热更新模块默认将热更新回调挂载到global对象上，渲染进程中不存在该对象就会抛出错误

解决方案 #

步骤1：修改Webpack渲染进程配置 #

在webpack.react.config.babel.js的output配置项中新增globalObject字段，指定Webpack挂载全局回调的对象为环境通用的globalThis：

export const output = {
  path: _resolve(__dirname, "dist"),
  filename: "js/[name].js",
  globalObject: 'globalThis' // 新增这一行
};

步骤2：调整Electron窗口配置（二选一即可） #

根据你的应用安全需求选择以下任意一种方案：

方案A：本地应用无外部内容加载需求

在主进程main.ts创建BrowserWindow的webPreferences配置中开启Node集成、关闭上下文隔离，同时指定preload脚本路径（注意你当前package.json根目录下的preload字段是无效配置，需要删除，改为在窗口配置中指定）：

import { BrowserWindow } from 'electron'
import path from 'path'

const mainWindow = new BrowserWindow({
  width: 1200,
  height: 800,
  webPreferences: {
    nodeIntegration: true,
    contextIsolation: false,
    preload: path.join(__dirname, 'preload.js')
  }
})

该方案适合仅加载本地代码的桌面应用，配置最简单。

方案B：需要加载外部内容、要求更高安全性

不需要修改nodeIntegration和contextIsolation的默认配置，直接在preload.ts中添加全局变量polyfill：

// 在preload.ts顶部添加这行代码
globalThis.global = globalThis

该方案符合Electron安全最佳实践，不会暴露完整Node能力给渲染进程。

步骤3：验证修复效果 #

清理项目缓存后重新运行：

1. 删除dist文件夹、node_modules文件夹、package-lock.json文件
2. 执行npm install重新安装依赖
3. 执行npm run dev启动应用，报错即可解决

内容的提问来源于stack exchange，提问作者Lucas S. G.