React中如何导入ipcRenderer？导入时遇require is not defined错误

这个问题我之前帮不少开发者解决过，本质是Electron默认在渲染进程里禁用了Node.js API，导致require无法被识别。下面给你两个靠谱的解决思路，按需选择：

方法一：开启Node.js集成（适合开发调试） #

如果只是开发阶段快速验证功能，可以直接在Electron主进程的窗口配置里开启nodeIntegration并关闭contextIsolation：

找到你的主进程文件（通常是main.js或main.ts），修改BrowserWindow的webPreferences配置：

const { BrowserWindow } = require('electron');

const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    // 开启Node.js API集成
    nodeIntegration: true,
    // 关闭上下文隔离（Electron 12+默认开启，必须显式关闭）
    contextIsolation: false
  }
});

配置完成后，你就能在React组件里直接导入ipcRenderer了：

import { ipcRenderer } from 'electron';

// 比如发送消息到主进程
const sendMsg = () => {
  ipcRenderer.send('test-channel', 'Hello from React');
};

注意：这种方法不适合生产环境，因为会让渲染进程拥有完整的Node.js权限，存在安全风险。

方法二：使用预加载脚本（推荐生产环境） #

这是Electron官方推荐的安全做法，通过预加载脚本暴露需要的API，既满足功能需求，又能限制渲染进程的权限：

步骤1：创建预加载脚本 #

在项目根目录创建preload.js文件，通过contextBridge把需要的ipcRenderer方法暴露给渲染进程：

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

// 只暴露你需要的API，避免滥用Node权限
contextBridge.exposeInMainWorld('electronAPI', {
  // 封装发送消息的方法
  sendToMain: (channel, data) => {
    ipcRenderer.send(channel, data);
  },
  // 封装监听主进程消息的方法
  onMainResponse: (channel, callback) => {
    ipcRenderer.on(channel, (event, ...args) => callback(...args));
  }
});

步骤2：配置主进程的预加载路径 #

回到主进程文件，修改webPreferences，指定预加载脚本的路径，同时保持上下文隔离开启（默认值）：

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

const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    // 配置预加载脚本路径，注意用path.join确保路径正确
    preload: path.join(__dirname, 'preload.js'),
    // 上下文隔离默认开启，这里可以显式写出增强可读性
    contextIsolation: true,
    // Node集成默认关闭，保持默认即可
    nodeIntegration: false
  }
});

步骤3：在React组件中使用暴露的API #

不需要再导入electron，直接通过window.electronAPI调用封装好的方法：

import { useEffect } from 'react';

function App() {
  const sendMessage = () => {
    window.electronAPI.sendToMain('test-channel', 'Hello from React');
  };

  useEffect(() => {
    // 监听主进程返回的消息
    window.electronAPI.onMainResponse('test-response', (data) => {
      console.log('收到主进程消息：', data);
    });

    // 组件卸载时清理监听
    return () => {
      ipcRenderer.removeAllListeners('test-response');
    };
  }, []);

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

export default App;

总结 #

• 开发调试用方法一，快速验证功能；
• 生产环境必须用方法二，遵循Electron的安全规范，避免权限泄露。

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