Electron v15调用ipcRenderer.on报is not a function问题求助

Electron v12+ 版本默认开启上下文隔离（contextIsolation），contextBridge不允许直接暴露完整的ipcRenderer原生对象，其原型链上的on/send等方法会被过滤，所以渲染进程调用时会抛出is not a function错误。
你直接在渲染进程引入ipcRenderer报重复声明错误，是因为preload.js已经把ipcRenderer挂载到了全局window对象上，同名变量重复定义导致冲突。

步骤1：修改preload.js，按最小权限封装IPC接口 #

不要直接暴露完整ipcRenderer，仅封装业务需要的通信方法，符合Electron安全规范：

const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('electronAPI', {
  // 渲染进程向主进程发送json:get消息
  sendJsonGet: (dataset) => ipcRenderer.send('json:get', dataset),
  // 监听主进程返回的tasks.return事件
  onTasksReturn: (callback) => ipcRenderer.on('tasks.return', (_, json) => callback(json)),
  // 可选：补充移除监听器方法，避免内存泄漏
  removeTasksReturnListener: (callback) => ipcRenderer.removeListener('tasks.return', callback)
})

步骤2：修改renderer.js，调用封装好的全局API #

无需手动引入ipcRenderer，直接使用preload挂载的全局接口即可：

// 定义回调函数，方便后续移除监听器
const handleTasksReturn = (json) => {
  console.log(json)
}
document.getElementById('test').addEventListener('click', () => {
  window.electronAPI.sendJsonGet('tasks')
})
// 监听主进程回传的消息
window.electronAPI.onTasksReturn(handleTasksReturn)
// 页面卸载时可选移除监听器
// window.addEventListener('beforeunload', () => {
//   window.electronAPI.removeTasksReturnListener(handleTasksReturn)
// })

步骤3：确认main.js窗口配置正确 #

创建窗口时确保preload路径正确，不要关闭默认的上下文隔离配置（关闭会引入安全风险）：

const path = require('path')
const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    // 用path拼接绝对路径，避免相对路径出错
    preload: path.join(__dirname, 'preload.js'),
    // 以下为默认配置，不要手动修改为false
    nodeIntegration: false,
    contextIsolation: true
  }
})

修改后重启项目即可实现主进程向渲染进程的消息回传。

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