Electron can not load preload script in packaged app using electron builder


#1

I am trying to launch BrowserWindow in electron app using below simple code on OS X where preload script is specified using path which has file:// prefix. It does not work with this prefix. I have verified this by putting log statement in preload.js file. I also do not see any error on console when there is file:// prefix. You think preload script is loaded successfully but functionality does not work.

mainWindow = new BrowserWindow({
  'width': width,
  'height': height,
  'max-width': width,
  'max-height': height,
  'fullscreen': false,
  'frame': false,
  'kiosk': false,
  'transparent': false,
  'show': true,
  'resizable': false,
  'node-integration': false,      
  'preload':'file://' + __dirname + '/preload.js'
});

Now If I remove the file:// prefix from the preload script path (like shown below), It works fine in development mode (by launching app using npm start from terminal). My Log statement shows up in app’s dev tools console and functionality start working.

mainWindow = new BrowserWindow({
  'width': width,
  'height': height,
  'max-width': width,
  'max-height': height,
  'fullscreen': false,
  'frame': false,
  'kiosk': false,
  'transparent': false,
  'show': true,
  'resizable': false,
  'node-integration': false,      
  'preload':__dirname + '/preload.js'
});

After this I packaged the app using electron-builder and try to launch the application from packaged .app file, it can not find the preload script and shows me below error in app’s dev tools console. As you can see from the error that perload.js is inside asar archive when packaged.

Unable to load preload script /Users/administrator/temp1/electron/tc-client/dist/tc-client-darwin-x64/tc-client.app/Contents/Resources/app.asar/preload.js

Please share any information on this. How should I specify absolute path for preload.js when passing to BrowserWindow? Documentation says that it should be absolute path but does not mention how to specify absolute path so that application works in both development and packaged mode(when file is inside asar achive).

I am using below versions for electron and electron-builder

“devDependencies”: {
“electron-builder”: “^3.17.1”,
“electron-prebuilt”: “^0.36.12”
}


#2

I want to know if this is right place for this issue. No one is responding. is this possible bug in the electron when reading from asar archive?


#3

Not everything can read files directly out of an asar file. For these instances you can use the unpacked file system documented here:

http://electron.atom.io/docs/tutorial/application-packaging/#adding-unpacked-files-in-asar-archive


#4

@leedohm, Thank you for suggesting unpacked files. so I turned off the archiving completely while building the app. I still see the same issue as before. As you can see in below error, there is no asar archive in the path but the error is same.

Unable to load preload script /Users/administrator/temp1/electron/electron-quick-start/dist/tc-client-darwin-x64/tc-client.app/Contents/Resources/app/preload.js

FYI, I confirmed that preload.js exists at location in the error. I am also signing the app with certificate.


#5

Maybe I’m reading your code incorrectly, but it appears from the documentation that there is no preload option on the bare options object. There is, however, a preload option on the webPreferences option of the bare options object.

http://electron.atom.io/docs/api/browser-window/


#6

@leedohm, thank you for the reply. I think it works even if you don’t put it under web preferences option. At least it works for me. I have figured out the problem with preload script. I was using watchjs node module in preload script. This was my first statement in the preload.js

require(“watchjs”)

it was available in development environment but not in packaged app. Once I bundled the watchjs node module with with app, it started loading fine. I am not sure why i did not think about this before but it was clear from the error. it was unable to load the script. It means it was able to find the script at given path,but some error in script. I wish error was mode specific like “module not found”. Thank you for your help on this.