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.

Answer 1

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

Answer 2

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

did the trick in my case!

Answer 3

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.