ipcRenderer.on is not a function

Question

I am using the Main › Preload › Renderer process stack.

preload.js

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

renderer.js

console.log(ipcRenderer) // it shows something like:
/**
{_events: {…}, _eventsCount: 0, _maxListeners: undefined, send: ƒ, sendSync: ƒ, …}
invoke: ƒ ()
postMessage: ƒ ()
send: ƒ ()
sendSync: ƒ ()
sendTo: ƒ ()
sendToHost: ƒ ()
Symbol(kCapture): false
_events: {}
_eventsCount: 0
_maxListeners: undefined
__proto__: Object
**/

console.log(ipcRenderer.on) // undefined

When trying to use the ipcRenderer.on() method, it is logging an error:

Uncaught TypeError: ipcRenderer.on is not a function

Was this method been removed in the newer versions? What is causing it to be not available on the renderer process?

Answer 1

Here's a little workaround for that. Yet i don't think this is a good idea for security.

const { contextBridge, ipcRenderer } = require("electron");    
contextBridge.exposeInMainWorld("electron", { ipcRenderer: { ...ipcRenderer, on: ipcRenderer.on } });