Electron Forge打包后报错：找不到@electron/remote模块

原因分析 #

开发模式下Electron可直接读取项目根目录的node_modules，但打包后应用会生成独立的文件结构，若@electron/remote未被正确标记为生产依赖、未被打包工具纳入产物，或渲染进程加载方式不符合打包规则，就会出现模块找不到的错误。

解决方案 #

1. 确保@electron/remote为生产依赖 #

检查项目根目录的package.json，确认@electron/remote在dependencies而非devDependencies中。若不在，执行以下命令调整：

npm uninstall @electron/remote --save-dev && npm install @electron/remote --save

2. 调整渲染进程模块加载方式 #

避免使用window.require进行运行时加载（打包后路径易失效），改用ES模块导入：

// 渲染进程代码替换为
import * as remote from '@electron/remote'

若需保留window.require，需关闭上下文隔离（不推荐，存在安全风险）：

// 主进程创建窗口时的webPreferences配置
const mainWin = new BrowserWindow({
  // 其他窗口配置
  webPreferences: {
    nodeIntegration: true,
    contextIsolation: false
  }
})

3. 推荐：使用预加载脚本（安全合规） #

若开启上下文隔离（Electron默认开启），通过预加载脚本暴露@electron/remote：

1. 创建preload.js文件：

const { contextBridge } = require('electron')
const remote = require('@electron/remote')

contextBridge.exposeInMainWorld('electronRemote', remote)

2. 主进程窗口配置中指定预加载脚本：

const path = require('path')

const mainWin = new BrowserWindow({
  // 其他窗口配置
  webPreferences: {
    contextIsolation: true,
    preload: path.join(__dirname, 'preload.js') // 确保路径正确
  }
})

3. 渲染进程中使用暴露的对象：

const remote = window.electronRemote

4. 检查Electron Forge打包配置 #

若使用webpack模板，确保webpack.renderer.config.js未将@electron/remote排除在打包外：

// webpack.renderer.config.js
module.exports = {
  // 其他配置
  externals: {
    // 移除任何包含@electron/remote的配置项
  }
}

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