解决 Electron v13.6.9 打包后 Cannot find module '@electron/remote' 问题

在基于 Electron v13.6.9 开发桌面应用的过程中，不少开发者会遇到打包后抛出 Cannot find module '@electron/remote' 的错误，本文结合实际开发场景，梳理该问题的成因与完整解决路径，希望能为同版本开发者提供参考。

问题背景

Electron 从 v12 版本开始，将原本内置的 remote 模块剥离为独立的 @electron/remote 包，这一调整虽提升了模块管理的灵活性，但也导致低版本 Electron（如 v13.6.9）在打包环节容易出现模块缺失问题。笔者在项目打包后遇到该报错，核心表现为应用启动后直接提示模块找不到，本地开发环境正常，仅打包产物出现异常。

问题成因

1. 依赖管理层面： @electron/remote 未安装至生产依赖，或版本与 Electron v13.6.9 不兼容；
2. 主进程配置层面：未完成 @electron/remote 的初始化，或 webPreferences 配置未适配；
3. 打包配置层面：打包工具（如 electron-builder）未将 @electron/remote 纳入打包产物，导致运行时无法解析模块。

完整解决步骤

1. 安装兼容版本的依赖

首先需确保安装适配 Electron v13 的 @electron/remote 版本，经实测，v2.0.1 版本与 Electron v13.6.9 完全兼容，且需将依赖保存至生产环境（避免打包时被忽略）：

npm install @electron/remote@2.0.1 --save
# 或使用 yarn
yarn add @electron/remote@2.0.1

2. 主进程初始化 remote 模块

Electron v13 中使用 @electron/remote 需手动完成初始化，且需配置 webPreferences 以启用相关能力，示例代码如下：

// main.js 主进程核心代码
const { app, BrowserWindow } = require('electron');
const path = require('path');

// 初始化 @electron/remote 模块
require('@electron/remote/main').initialize();

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true, // 启用 Node 集成
      contextIsolation: false, // v12+需显式关闭，否则 remote 无法使用
      enableRemoteModule: true, // 兼容配置，v13 仍需保留
      preload: path.join(__dirname, 'preload.js') // 如有 preload 脚本可保留
    }
  });

  // 为当前窗口启用 remote 模块
  require('@electron/remote/main').enable(mainWindow.webContents);

  mainWindow.loadFile('index.html');
}

app.whenReady().then(() => {
  createWindow();
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

3. 配置打包工具包含 remote 模块

这是解决打包后模块缺失的核心步骤，需在 electron-builder 配置中声明 @electron/remote 为外部依赖，确保其被纳入打包产物。

场景 1：使用 vue-cli-plugin-electron-builder

在项目根目录的 vue.config.js 中添加如下配置：

module.exports = {
  pluginOptions: {
    electronBuilder: {
      // 声明需打包的外部依赖
      externals: ['@electron/remote'],
      // 指定 Electron 版本，避免打包时版本不一致
      electronVersion: '13.6.9'
    }
  }
};

场景 2：纯 electron-builder 配置

直接在 package.json 中添加 build 配置：

{
  "build": {
    "externals": ["@electron/remote"],
    "electronVersion": "13.6.9"
  }
}

4. 重新打包验证

完成上述配置后，清理旧打包产物并重新打包：

# 清理旧产物
rm -rf dist/ node_modules/.cache/
# 重新安装依赖
npm install
# 执行打包命令
npm run build

补充说明

若项目中开启了 contextIsolation: true （推荐的安全配置），无法直接在渲染进程使用 @electron/remote ，需通过 preload 脚本暴露所需能力：

// preload.js
const { contextBridge } = require('electron');
const remote = require('@electron/remote');

// 向渲染进程暴露 remote 模块的指定能力
contextBridge.exposeInMainWorld('electronRemote', {
  dialog: remote.dialog,
  BrowserWindow: remote.BrowserWindow
});

渲染进程中通过 window.electronRemote.dialog 等方式调用即可。

问题解决核心逻辑

本次问题的解决核心在于三点：一是确保依赖版本兼容且安装至生产环境；二是完成主进程中 remote 模块的初始化与窗口启用；三是通过 externals 配置让打包工具识别并包含 @electron/remote 模块。这三个环节缺一不可，也是 Electron v13 及以上版本使用独立 remote 模块的通用配置逻辑。