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

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"));