electron-builder with browserWindow and preload.js. Unable to load preload script

Question

i`ve a problem with electron-builder and the browserWindows preload option in my main.js:

// Create the browser window.
  mainWindow = new BrowserWindow({
    x: mainWindowState.x,
    y: mainWindowState.y,
    width: mainWindowState.width,
    height: mainWindowState.height,
    minHeight: 500,
    minWidth: 1000,
    icon: path.join(__dirname, 'icon.ico'),
    frame: false,
    webPreferences: {
      preload: path.resolve(__dirname, 'preload.js'), // <--- PROBLEM
      nativeWindowOpen: true,
      spellcheck: true,
      nodeIntegration: false
    }
  });

after starting the packaged app i get the following error:

Unable to load preload script: C:\Users[...]\resources\app.asar\preload.js

The preload.js is in the same directory as the main.js.

Any ideas to solve this problem?

with kind regards, kai W.

Solution 1

webPreferences: {
                    frame: false,
                    nodeIntegration: true,
                    enableRemoteModule: true, //this must be true
                    preload: path.resolve(root, 'bridge', 'initialize.js'), 
                }

Unable to load preload script, but actually something was wrong with the initialize.js. in my file, has an error that remote.getGlobal is undefined, because this webPreferences.enableRemoteModule's default value is false at the version 10.x, so u must set it with true. then it will work good.

Solution 2

"extraResources": [
  "src/main/preload.js",
  "src/electron-actions/*,"
]

did the trick in my case!

Solution 3

Today I migrated from electron 9.x to 13.1.9. Those solutions didn't help me. My desision:

1. preload file path: ./src/public/preload.js
2. background.js

  win = new BrowserWindow({
    width: 800,
    height: 600,
    minHeight: 300,
    minWidth: 500,
    webPreferences: {
      preload: path.join(__static, 'preload.js'), // <- static
    },
  });

---

How does it work?

All files from ./src/public are just copied to the build folder. But after electron:serve and electron:build - build folders have differed structure. And you (or it's only my case) can't use __dirname. So need to use __static

P.s. About __static: https://webpack.electron.build/using-static-assets

P.s. Another example __static for electron:

protocol.registerSchemesAsPrivileged([{
  scheme: 'app',
  privileges: {
    secure: true,
    standard: true,
    icon: path.join(__static, 'icon.png'), // <- this
  },
}]);

They helped me to find a solution (use public folder): https://mmazzarolo.medium.com/building-a-desktop-application-using-electron-and-create-react-app-2b6d127f4fd7

Comments

[tpikachu]

Please show me your project structure. and you electron-builderconfiguration

[avisk]

For anyone who came here and was having the issue with the unpackaged app, then I found that the issue was that there was an error inside the preload.js, which appeared under Unable to load preload script

[Venryx]

Unfortunately, you can't have a generic index.js file included in both "files" and "extraResources" (adding to the second group, removes it from the first). Thus, this doesn't work as-is for me, as my preload file is the same as my main index.js file. (it does dynamic checking of whether running as main index file, or as preload)

[CamHart]

Why would you preload with nodeIntegration and remoteModule enabled? Typically those get disabled when you preload--that's the whole point in preloading.

[Slbox]

I also had a bug in my preload script itself.

[x93008]

see link, The official default value of the contextIsolation field has been changed so that if the field is true, then unsafe code insertion will be disabled

[rovyko]

This didn't work for me. I still got an error Unable to load preload script: "C:\Users\...\resources\preload.js" even though the script now exists in that directory!