0

I just started modifying the electron-react-boilerplate project and tried doing the following:

In the App.tsx file I added a button:

const ping = () => {
  electron.ipcRenderer.myAwesomePing('Hello world!');
};

const Hello = () => {
  return (
    <div>
      ...
      <button type="button" onClick={() => ping()}>
        Ping!
      </button>
      ...
    </div>
  );
};

And in the preload.js file, I added the corresponding call for myAwesomePing:

contextBridge.exposeInMainWorld('electron', {
  ipcRenderer: {
    myAwesomePing(text) {
      ipcRenderer.send('ipc-example', text);
    },

When I run the code, everything seems to work fine and I receive the ping through the context-bridge on the main process.

But, visual studio code keeps complaining, that it

Cannot find name 'electron'. Did you mean 'Electron'?

inside App.tsx.

Is this because I am missing something or just a bug in vscode? Is there maybe a build step necessary to create the connection?

enter image description here

Florian Baierl
  • 2,378
  • 3
  • 25
  • 50
  • Have you seen this for the ts warning ? [https://stackoverflow.com/questions/46562367/electron-and-typescript-cannot-find-module-electro](https://stackoverflow.com/questions/46562367/electron-and-typescript-cannot-find-module-electron) – Cesare Polonara Apr 05 '22 at 19:07

1 Answers1

0

ERB recently added support for globally exposed variables via preload:

https://github.com/electron-react-boilerplate/electron-react-boilerplate/blob/main/src/renderer/preload.d.ts

Copy and paste the file into your project and it should just work.

amilajack
  • 127
  • 1
  • 10