title: contextBridge.exposeInMainWorld in preload.ts: ipcRenderer receives the message from main.ts but the renderer doesn't get it
body: <p>Within an Electron-React-Typescript app  I managed to send message from renderer process to main through contextBridge.exposeInMainWorld in preload, but on the way back, the processed output from main, it actually passes thorugh and reaches preload.ts, but it doesn't reach  renderer process.
  It must be something really &quot;stupid&quot;, but I do not know what is the &quot;culprit&quot;. So, I ask you your kind help.</p>
  <p>preload.ts :</p>
  <pre><code>const {
    contextBridge,
    ipcRenderer
  } = require(&quot;electron&quot;)
  
  
  contextBridge.exposeInMainWorld(
    &quot;api&quot;, {
        send: (channel, data) =&gt; {
            ipcRenderer.invoke(channel, data).catch(e =&gt; console.log(e))
        },
        receive: (channel, func) =&gt; {
          ipcRenderer.on(channel, (event, ...args) =&gt; func(...args))
          //ipcRenderer.on(channel, (event, ...args) =&gt; {
            //console.log(&quot;ipcRenderer.on-args: &quot;, args);
          //});
        }
  )
  </code></pre>
  <p>index.d.ts :</p>
  <pre><code>declare interface Window {
      api: {
        send: (channel: string, ...arg: any) =&gt; void;
        receive: (channel: string, func: (event: any, ...arg: any) =&gt; void) =&gt; void;
      }
  }
  </code></pre>
  <p>main.ts :</p>
  <pre><code>ipcMain.handle(&quot;path-to-url&quot;, (IpcMainEvent, path) =&gt; {
    console.log(&quot;received a request from viewerDemo&quot;);
    if (mainWindow) {
      let urlified = url.pathToFileURL(path);
      console.log(&quot;urlified = url.pathToFileURL(path) : &quot;, urlified);
      console.log(&quot;urlified.href= &quot;, urlified.href);
      console.log(&quot;urlified.pathname= &quot;, url.pathToFileURL(path).pathname);
      mainWindow.webContents.on(&quot;dom-ready&quot;, () =&gt; {
        mainWindow.webContents.send(&quot;path-to-url&quot;, &quot;ohhhhhhhhhhhhhhhh&quot;);
        mainWindow.webContents.send(&quot;path-to-url&quot;, url.pathToFileURL(path).pathname);
      });
    }
  });
  </code></pre>
  <p>Renderer process (where the data doesn't show up properly!) :</p>
  <p>viewerDemo.tsx</p>
  <pre><code>import * as React from 'react';
  import Viewer from 'react-viewer';
  
  let path_1 = './images/natural-scene.jpeg';
  let url_path;
  
  const pathToUrlFunc = (path): string =&gt; {
    console.log(&quot;pathToUrlFunc called&quot;);
    window.api.send(&quot;path-to-url&quot;, path);
    let urlPath;
    window.api.receive(&quot;path-to-url&quot;, (event, args) =&gt; {
      console.log(&quot;window.api.receive called!&quot;);
      console.log(&quot;window.api.receive-args[0]: &quot;, args[0]);
      urlPath = args[0];
    });
    return urlPath;
  }
  
  function ViewerDemo() {
    const [ visible, setVisible ] = React.useState(false);
  
    let urlpath = pathToUrlFunc(path_1);
    console.log(&quot;urlpath: &quot;, urlpath);
  
    return (
      &lt;div&gt;
        &lt;button onClick={() =&gt; { setVisible(true); } }&gt;show&lt;/button&gt;
        &lt;Viewer
        visible={visible}
        onClose={() =&gt; { setVisible(false); } }
        images={[{src: 'https://www.fotolip.com/wp-content/uploads/2016/05/Nature-Scenes-
  21.jpg', alt: ''}]}
        //images={[{src: urlpath, alt: ''}]}
  
        /&gt;
      &lt;/div&gt;
    );
  }
  
  export default ViewerDemo;
  </code></pre>
  <p>In main I get : <code>path received from main:  ./images/natural-scene.jpeg</code>
  while for the way back from main to renderer I get: <code>Cannot read property '0' of undefined</code>
  <a href="https://i.stack.imgur.com/vltVy.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vltVy.jpg" alt="enter image description here" /></a></p>
  <p>If in contextBridge.exposeInMainWorld in the 'receive' part of the api I put:</p>
  <pre><code>  receive: (channel, func) =&gt; {
      //ipcRenderer.on(channel, (event, ...args) =&gt; func(...args))
      ipcRenderer.on(channel, (event, ...args) =&gt; {
        console.log(&quot;ipcRenderer.on-args: &quot;, args);
      });
    }
  </code></pre>
  <p>I don't get that error anymore, within preload.ts the correct message from main.ts appears, but still the renderer process doesn't get it:</p>
  <p><a href="https://i.stack.imgur.com/7sVHT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7sVHT.png" alt="enter image description here" /></a></p>