如何解决Electron与React通信时报fs.existsSync is not a function错误

报错根因 #

该报错核心是你在React前端业务代码中直接引入了electron包，React的构建工具（Webpack）会将Node.js环境专属的electron依赖打包进前端运行代码，而浏览器运行环境没有fs等Node原生模块，因此触发报错。你之前配置的主进程、预加载脚本参数本身没有问题，是调用方式不符合Electron的通信规范。

解决方案 #

步骤1：删除React代码中的electron直接引入 #

删掉App.js中如下代码，永远不要在React前端业务代码中直接引入electron包：

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

步骤2：调整预加载脚本逻辑 #

推荐使用Electron官方推荐的contextBridge暴露通信API，安全性更高，修改你的electron-preload.js代码：

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

contextBridge.exposeInMainWorld('electronAPI', {
  // 按需暴露你需要用到的IPC方法，不要直接暴露整个ipcRenderer对象
  sendIpc: (channel, ...args) => ipcRenderer.send(channel, ...args),
  listenIpc: (channel, callback) => ipcRenderer.on(channel, (event, ...args) => callback(...args)),
  remote: remote // 如果需要使用remote能力可以按需暴露
})

如果你坚持关闭contextIsolation，也可以使用你之前的写法直接挂载到window对象，但是要确保预加载文件路径配置正确。

步骤3：调整主进程配置（可选，更符合安全规范） #

如果使用contextBridge，可以关闭nodeIntegration、开启contextIsolation，这是Electron官方推荐的安全配置：

mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
        nodeIntegration: false, // 不需要开启
        enableRemoteModule: true, // 不需要使用remote能力可以关闭
        contextIsolation: true, // 配合contextBridge使用
        preload: path.join(__dirname, '/electron-preload.js'),
    },
});

步骤4：React代码中调用暴露的全局API #

修改App.js中的调用逻辑，直接使用预加载脚本挂载到window上的API即可：

console.log('electron ipc', window.electronAPI);
// 后续通信直接调用window.electronAPI上暴露的方法即可

排查点 #

如果执行后仍拿不到API对象，检查主进程中preload字段的路径是否和你实际的预加载脚本路径、文件名完全匹配，避免拼写错误。

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