Electron19报错 preload脚本加载失败、应用无法渲染排查

你遇到的TypeError: Cannot read properties of undefined (reading 'initialize')是@electron/remote模块加载失败导致的，和渲染进程异常直接相关，核心诱因有三点：

• 安装的@electron/remote版本和Electron 19不兼容
• @electron/remote初始化时机早于app就绪周期
• BrowserWindow配置缺少remote模块运行必需的权限参数

• 先重装匹配版本的依赖：Electron 19对应兼容的@electron/remote版本为2.0.x系列，执行以下命令重装，排除包损坏、版本不匹配问题：

npm uninstall @electron/remote
npm install @electron/remote@2.0.12 --save

安装完成后可以检查node_modules/@electron/remote/main.js文件是否导出了initialize方法，确认包文件完整。

• 调整remote初始化时机：@electron/remote的initialize方法必须在app模块触发ready事件之后调用，你当前直接在loadWindow函数内调用的写法，会在app未就绪时执行，此时模块本身未完成加载，导入的对象为undefined。你需要把窗口创建逻辑放到app ready回调内执行，示例调整：

// 主进程入口处调整逻辑
app.whenReady().then(() => {
  // app就绪后先初始化remote
  ElectronRemoteMain.initialize();
  // 再执行窗口加载逻辑
  loadWindow();
});
// 删掉loadWindow函数内原来的ElectronRemoteMain.initialize()调用

• 补全webPreferences配置：Electron 14之后默认禁用了remote模块的运行权限，你当前的webPreferences配置缺少必填参数，就算初始化不报错，渲染进程也无法正常调用remote能力。修改BrowserWindow配置如下：

mainWindow = new BrowserWindow({
  // 其他原有配置保持不变
  webPreferences: {
    preload: path.join(__dirname, 'dist/renderer.prod.js'),
    // 新增以下三个配置，兼容老项目迁移
    nodeIntegration: true,
    contextIsolation: false,
    enableRemoteModule: true,
  },
});

如果后续要做安全加固，可以再调整contextIsolation配置，通过preload脚本的contextBridge暴露所需能力，迁移阶段先开以上配置保证功能跑通。

• 修正渲染进程导入逻辑：Electron 12之后remote已经从electron核心包拆分，渲染进程内不能再使用const { remote } = require('electron')的写法，要改为从独立包导入：

// 渲染进程代码内修改导入
const remote = require('@electron/remote');

重新构建运行应用，先确认主进程控制台不再抛出initialize相关的报错，再在渲染进程代码中打印remote.getCurrentWindow()，如果能正常拿到窗口实例，说明remote模块加载正常，渲染异常问题即可解决。

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