How can I expose functions from the main process to the renderer?

[finnd0]

Hi, I'm a beginner and this template already helped me a lot.
But I still have problems understanding how can I expose functions from the main process to the renderer.

I have a function that makes an API call to my server in the main.ts and I want to call it in the renderer and return data back to the renderer.

Using ipcRenderer gives me this Error:

Uncaught ReferenceError: __dirname is not defined
at node_modules/electron/index.js (index.js:4:28)
at __require (chunk-DFKQJ226.js?v=01f4f014:8:50)
at index.js:21:34

I would be grateful if someone can help me with this

[Deluze]

Did you remove the ipcRenderer from the Context Bridge in preload.ts by any chance? By default the template comes with a really simple example on how to use ipcMain and ipcRenderer.

If you want to use anything from NodeJS, make sure to expose it using the Context Bridge. You can also enable nodeIntegration during window construction (not recommended).

Hope this helps.

[Deluze]

Besides adding ipcRenderer to preload.ts, you can ofcourse do this with any kind of NodeJS object, script etc.

I'd refer to this document provided by Electron themselves, really informative: Context Bridge

[finnd0]

Thank you. I understand renderer --> main now. But I still have problems with main --> renderer.

I tried it by adding a function to the preload.ts but then I get this error in my renderer:

• Property 'handleCounter' does not exist on type 'ElectronApi'

I also tried it without changing the preload.ts but then I get this error:
window.electron.ipcRenderer.on is not a function

[Deluze]

I recommend reading up on Electron's IPC tutorial, they show off some neat tricks on how communication is done between renderer and main.

The error you mentioned is not a runtime error, we run TypeScript and you'll have to add handleCounter to the ElectronApi type in electron.d.ts. If you don't like this feel free to remove electron.d.ts, that should do the trick.

[onequid]

Besides adding ipcRenderer to preload.ts, you can ofcourse do this with any kind of NodeJS object, script etc.

I'd refer to this document provided by Electron themselves, really informative: Context Bridge

This solved my issue! ❤️