Electron react sending data two-way in ipcMain and ipcRenderer

Question

I am trying to create a communication between ipcMain and ipcRenderer in electron. I am using electron react boilerplate

So first step was adding this part to main:

app
  .whenReady()
  .then(() => {
    ipcMain.handle('dialog:openFile', () => {
      console.log('test');
    });

second step was to add it in preload file:

contextBridge.exposeInMainWorld('electronAPI', {
  openFile: () => ipcRenderer.invoke('dialog:openFile'),
});

and the third step is where I get stuck. I am trying to add it in react component by:

await window.electronAPI.openFile();

But I get Property 'electronAPI' does not exist on type 'Window & typeof globalThis'. error. What is the issue here?

Answer 1

Hello @Webby are you sure that the preload file is loaded in the browserWindow Object? Also that is necessary that you have the property contextIsolation on True

something like this

const win = new BrowserWindow(
{
  fullscreen: false,
  webPreferences: {
    contextIsolation: true,
    preload: path.join(__dirname, '../path/to/your/preload.js'),
  },
},