Electron - preload.js is not loaded and error is occurred on Windows 10

Question

When I built npm start the app on Windows 10, it does not work normally which worked fine on macOS.

package.json

{
  "name": "SimpleTimer",
  "version": "1.0.0",
  "productName": "SimpleTimer",
  "copyright": "",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "node_modules/.bin/electron .",
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "electron": "^10.1.2"
  }
}

I got the following error message.

TypeError: ipcMain.handle is not a function where this applies:

main.js

ipcMain.handle("ipc-timer-start", () => {
  if ( isWorking === true ) {
    return true
  }
  else {
    StartTimer();
    isWorking = true;
  }
  return true;
});

This function is the recipient of the ipc communication from ipcRenderer.invoke() written in preload.js. That's the invoke() method in TimerStart api in the following source.

preload.js

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

contextBridge.exposeInMainWorld(
  "api", {
    TimerStart: () =>
        ipcRenderer.invoke("ipc-timer-start")  /*** HERE ***/
            .then(result => result)
            .catch(err => console.log(err)),

    TimerStop: () => ipcRenderer.send("ipc-timer-stop"),

    TimerReset: () => ipcRenderer.send("ipc-timer-reset"),

    DisplayTimer: (channel, listener) => {
      ipcRenderer.on("ipc-display-timer", (event, arg) => listener(arg));
    }
  }
);

Of course, preload.js is specified when it created the BrowserWindow.

main.js

 mainWindow = new BrowserWindow({
    title: config.name,
    width: 1024,
    height: 640,
    minWidth: 1024,
    minHeight: 640,
    webPreferences: {
      worldSafeExecuteJavaScript: true,
      nodeIntegration: false,
      contextIsolation: true,
      preload: __dirname + '/preload.js'  /*** HERE ***/
    }
  });

After skipping this error message dialog, I checked with the DevTools and it looks like preload.js is not loaded from the statement of Unable to load preload script:.

Given these statements, it seems that preload.js is not properly included in the build, what should I do?

Once again, it worked fine on macOS, but it doesn't work properly on Windows 10 due to these issues.

score 0 · Accepted Answer · answered Sep 18 '20 at 07:58

I was able to solve this problem oneself.

This problem wasn't in electron, it was in my Parallels Desktop for Mac environment.

I was trying to get the Electron working directory to work on Windows 10 through the Parallels network drive, but it doesn't seem to recognize the build file path properly.

Currently, even if you have a local install of Electron instead of a global install, it doesn't seem to be able to build properly.

npm install electron@latest --save-dev

It seems that a project that could be built on a macOS cannot be built directly on Windows 10.

Electron is "electron ." command to build on Windows 10, it seems to extract the necessary files on the C:\Users\[UserName]\AppData\Roaming\npm\ path. I don't know the exact reason, but it seems to be inconsistent with locally installed Electron.

If you want to run your project on Windows 10, copy the project directory and input "npm install" command to reinstall Node modules such as Electron. It will automatically reinstall the dependent packages listed in package.json.

As a result, I can finally build "node_modules/.bin/electron ." to build it without any problems.

Thank you so much. I installed electron globally and the version was inconsistent with the local electron because I ran `npm audit fix` and electron was downgraded. Running `npm install electron@latest` solved the issue. — skygate, Sep 07 '22 at 08:40

Electron - preload.js is not loaded and error is occurred on Windows 10

1 Answers1