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.

Ozmo

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

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 – Hasin

Answer 1

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

did the trick in my case!

Ozmo

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) – Twelfthtide

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! – Perigee

Answer 2

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.

Jerrilyn

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

I also had a bug in my preload script itself. – Ribeiro

Answer 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

End

Answer 4

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"
    ],
  },
}

Harday

Answer 5

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

 "build": {
    "files": [
      "./src/preload.js"
    ]
}

Arm

Answer 6

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) 
})

Pederasty

Answer 7

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"
  ],

Breezeway

Answer 8

I had this same issue because I was using import instead of require to import modules in the preload.js file.

GOOD:

const {ipcRenderer} = require('electron/renderer')
const {contextBridge} = require('electron')

BAD:

import {ipcRenderer} from 'electron/renderer'
import {contextBridge} from 'electron'

Hiroshima

Answer 9

  webPreferences: {
    webSecurity: false,
    enableRemoteModule: true,
    nodeIntegration: true,
    contextIsolation: false,  // <== important
    preload: path.join(__dirname, 'src/preload.js')
  }

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

Jeffjeffcoat

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 – Jeffjeffcoat