18

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.

Kai Werschmöller
  • 251
  • 1
  • 2
  • 8
  • Please show me your project structure. and you ```electron-builder```configuration – tpikachu Mar 23 '20 at 13:46
  • 3
    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` – avisk Jul 10 '21 at 13:53

8 Answers8

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

did the trick in my case!

Kai Werschmöller
  • 251
  • 1
  • 2
  • 8
  • 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) – Venryx Sep 13 '20 at 16:37
  • 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! – rovyko Jun 13 '21 at 03:20
4
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.

ustbtaotao
  • 57
  • 1
  • 1
  • 4
    Why would you preload with nodeIntegration and remoteModule enabled? Typically those get disabled when you preload--that's the whole point in preloading. – CamHart Nov 23 '20 at 23:39
  • I also had a bug in my preload script itself. – Slbox Jan 30 '21 at 23:57
4

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

Андрей Сорока
  • 981
  • 1
  • 8
  • 11
2

Sorry for the late answer. For me, what worked was:

preload.js location

static
  |- preload.js

main/index.js

win = new BrowserWindow({
  width: 800,
  height: 600,
  minHeight: 300,
  minWidth: 500,
  webPreferences: {
    preload: path.resolve(getElectronApp().getAppPath(), 'preload.js'),
  },
});

And package.json (electron-webpack)

"electronWebpack": {
  "main": {
    "extraEntries": [
      "./static/preload.js"
    ],
  },
}
H3r3zy
  • 86
  • 7
0

Add the preload.js file inside files config like this:

 "build": {
    "files": [
      "./src/preload.js"
    ]
}
Budi Salah
  • 153
  • 2
  • 11
0

What really worked for was to use contextBridge inside process.once('loaded') event.

process.once('loaded', () => {
 contextBridge.exposeInMainWorld('versions', process.versions)
 contextBridge.exposeInMainWorld('API', API) 
})
shivam singh
  • 49
  • 5
0

I faced the same problem. As I was using typescript and preload.ts is not imported or used directly in ipcMain process, so during compilation this file was being ignored. So output js directory after compilation doesn't contain any preload.js file. To fix this problem I added an entry in tsconfig.json file by which I explicitly instructed tsc (typescript compiler) to add this file to output js directory.

"files": [
    "app/preload.ts", //just added this
    "app/main.ts"
  ],
Shahriar Ahmed
  • 502
  • 4
  • 11
-3
  webPreferences: {
    webSecurity: false,
    enableRemoteModule: true,
    nodeIntegration: true,
    contextIsolation: false,  // <== important
    preload: path.join(__dirname, 'src/preload.js')
  }

https://github.com/electron/electron/pull/15738

x93008
  • 73
  • 1
  • 3
  • 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 – x93008 Mar 16 '21 at 11:58