electron-react-boilerplate: window.electron does not exist Error

Question

I'm using electron-react-boilerplate v4.0.0 I've exposed this electron api from preload.js to use in renderer process. preload.js

The problem comes when trying use "window.electron.ipcRenderer.printTicket()" inside a react component.

Hello React Component

I have the Error: "window.electron does not exist on type 'Window & typeof globalThis'".

Answer 1

@Daniel,

Try this:-

Edit your index.tsx from something like this:-

import { render } from "react-dom";
import App from "./App";


render(<App />, document.getElementById("root"));

to something like this:-

import { render } from "react-dom";
import App from "./App";

declare global {
  interface Window {
    electron: any;
  }
}

render(<App />, document.getElementById("root"));

Now you can use window.electron anywhere in the renderer. This fixed the problem for me. You could also add this in the App.js file.

Although I have not tested it, you can do something like this too:-

preload.js

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

contextBridge.exposeInMainWorld('electron', {
  hworld: "Hello world" // window.electron.hworld is a string ("Hello world")
});

index.tsx

import { render } from "react-dom";
import App from "./App";

declare global {
  interface Window {
    electron: {
      hworld: string // Since you know window.electron.hworld is a string
    }
  }
}

render(<App />, document.getElementById("root"));