I'm building my electron app, specifically trying out ipc process for customizable minimize, maximize, close buttons, and ran into this error:
Unable to load preload script: C:\Users\username\generic_project\generic_project_ver_alpha.webpack\main\preload.ts
I looked at .webpack/main and it is true, there's no preload.js there. I followed the two webpages below in my initial setup:
Here's my code:
index.ts
const createWindow = (): void => {
const mainWindow = new BrowserWindow({
height: 1280,
width: 844,
frame: false,
webPreferences: {
preload: path.join(__dirname, "preload.ts"), // Ensure correct path
nodeIntegration: true, //security risk?
contextIsolation: true, //for context bridge api
sandbox: false
},
});
// and load the index.html of the app.
mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
// Open the DevTools.
mainWindow.webContents.openDevTools();
};
preload.ts
import { ipcRenderer, contextBridge } from "electron";
contextBridge.exposeInMainWorld("electron", {
send: (channel: string, data: any) => ipcRenderer.send(channel, data),
receive: (channel: string, func: (event: any, ...args: any[]) => void) =>
ipcRenderer.on(channel, (event, ...args) => func(event, ...args)),
});
fe.config.ts plugins:
plugins: [
new AutoUnpackNativesPlugin({}),
new WebpackPlugin({
mainConfig,
renderer: {
config: rendererConfig,
entryPoints: [
{
html: './src/index.html',
js: './src/renderer.ts',
name: 'main_window',
preload: {
js: './src/preload.ts',
},
},
],
},
}),
My path:
- src/
- components/
- SideBar.tsx
- TopBar.tsx
- App.tsx
- index.tsx
- index.css
- index.html
- preload.ts
- renderer.ts
- components/
I've looked up the answers online and try out solutions like enabling nodeIntegration, setting sandbox to false but nothing seems to work.
If anyone can point me to the nature of the problem, it would be very helpful. Thanks.