Electron+React+Vite开发Windows应用时ipcRenderer导入报错解决

方法1：通过预加载脚本（preload）暴露ipcRenderer（推荐，符合Electron安全规范） #

这是Electron官方推荐的安全实现方式，避免直接在渲染进程中暴露完整的Electron模块：

• 在Electron主进程配置文件（如main.js/electron-main.js）中，创建窗口时指定预加载脚本：

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 指定预加载脚本路径，示例假设脚本在electron目录下
      preload: path.join(__dirname, './electron/preload.js'),
      nodeIntegration: false, // 禁用Node集成，保持安全
      contextIsolation: true // 开启上下文隔离，Electron默认安全设置
    }
  });

  mainWindow.loadURL('http://localhost:5173'); // 加载Vite开发服务地址
}

app.whenReady().then(createWindow);

• 编写预加载脚本preload.js，通过contextBridge暴露需要的ipcRenderer方法：

const { contextBridge, ipcRenderer } = require('electron');

// 向渲染进程全局环境暴露安全的API
contextBridge.exposeInMainWorld('electronAPI', {
  send: (channel, data) => ipcRenderer.send(channel, data),
  on: (channel, callback) => ipcRenderer.on(channel, (event, ...args) => callback(...args))
  // 按需添加你需要的ipcRenderer方法，不要暴露整个ipcRenderer
});

• 在React的App.jsx中，直接使用全局暴露的electronAPI，无需导入electron模块：

function App() {
  const sendTestMessage = () => {
    window.electronAPI.send('test-channel', '来自渲染进程的消息');
  };

  return (
    <div>
      <button onClick={sendTestMessage}>发送消息到主进程</button>
    </div>
  );
}

export default App;

方法2：配置Vite跳过electron模块检查（仅学习测试用，不推荐生产环境） #

如果只是学习阶段想快速测试，可以通过Vite配置绕开模块识别问题，但会关闭Electron的安全隔离机制：

• 在vite.config.js中添加配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      external: ['electron'] // 标记electron为外部模块，不进行打包
    }
  }
});

• 同时修改Electron主进程的窗口配置，关闭安全隔离：

webPreferences: {
  nodeIntegration: true,
  contextIsolation: false
}

之后即可在App.jsx中正常导入ipcRenderer，但注意这种方式存在安全风险，生产环境务必使用方法1。

报错核心原因 #

• Vite默认将代码打包为浏览器环境产物，而electron是Node.js环境模块，浏览器无法直接识别，直接导入会触发模块不存在的错误。
• Electron默认开启的contextIsolation安全策略，会隔离渲染进程与Node.js环境，禁止直接在渲染进程中访问Electron原生模块。

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