使用Electron-Forge创建应用时导入ipcRenderer/ipcMain遇依赖路径错误

常见原因与解决方案： #

• 检查导入逻辑是否符合Electron安全规范
  主进程（如main.js）导入ipcMain直接用官方方式即可，禁止使用相对路径：

  // 主进程正确导入
  const { ipcMain } = require('electron');
  // 或ES模块语法
  import { ipcMain } from 'electron';
  

  渲染进程（如renderer.js）不能直接导入ipcRenderer（Electron 14+强制启用上下文隔离），必须通过预加载脚本暴露：

  1. 新建preload.js脚本：

     const { ipcRenderer, contextBridge } = require('electron');
     // 安全暴露API到渲染进程
     contextBridge.exposeInMainWorld('electronAPI', {
       send: (channel, data) => ipcRenderer.send(channel, data),
       receive: (channel, callback) => ipcRenderer.on(channel, (_, data) => callback(data))
     });
     

  2. 在主进程窗口配置中指定预加载脚本，必须使用绝对路径：

     const path = require('path');
     const mainWindow = new BrowserWindow({
       webPreferences: {
         preload: path.join(__dirname, 'preload.js'),
         contextIsolation: true,
         nodeIntegration: false
       }
     });
     

  3. 渲染进程中直接调用暴露的全局API，无需导入electron模块：

     // 渲染进程调用
     window.electronAPI.send('channel-name', data);
     

• 修复Webpack配置（Webpack模板场景）
  若使用Electron-Forge的Webpack模板，需在webpack.renderer.config.js中添加externals配置，避免Webpack错误处理electron模块：

  module.exports = {
    // 其他配置项...
    externals: {
      electron: 'commonjs electron'
    }
  };
  

• 清除缓存重新构建
  执行以下命令清理旧构建缓存，再重新启动项目：

  npx electron-forge clean
  npm run start
  

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