While trying to build and package your Electron application, you may occasionally encounter file load errors. Your application works perfectly in development but the distribution returns nothing more than a blank white page.
You may get error messages such as Unable to load preload script: … resources/app.asar/preload.js, Not allowed to load local resource: file://src/index.html or even Application entry file “dist/main.js” in the linux-unpacked/resources/app.asar” does not exist. Seems like a wrong configuration.
All of the above-mentioned error messages stem from file path problems. Your packaged Electron application requires absolute paths to the HTML file, modules and extra resources. And the paths in the distribution package are not always the same as those in the development.
There are a NodeJS variable and Electron functions to avoid this problem. In whichever file (or on whichever operating system) you invoke your NodeJS process, __dirname always returns the absolute path of where you start it. Electron app API allows you to get and set paths to your application resources.
Instead of using the relative path that can cause an error in production, you can set up the paths using __dirname in the main process.
const path = require('path');
const glob = require('glob');
const { app, BrowserWindow } = require('electron');
let mainWindow:any = null;
function initialize ():void {
makeSingleInstance();
function createWindow () {
const windowOptions = {
width: 1080,
minWidth: 680,
height: 840,
title: app.getName(),
webPreferences: {
nodeIntegration: false
}
}
mainWindow.loadURL(path.join('file://', __dirname, '/index.html'));
}
If your application won’t load the HTML file using __dirname, your problem presumably won’t be related to Electron.
When bundled by Webpack, the variable __dirname doesn’t automatically show the path to build resources but to your project root, or a single forward slash ‘/’. This may be the cause of your trouble. In this case, you just need to open your webpack config and set false to node: {__dirname: }.
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
...
context: __dirname,
node: {
__dirname: false
},
}
Then __dirname will return the path to the current application directory. Neither setting “asar”: false nor specifying “devEngines” is required. app.getPath(name) works in the same manner. This function is really useful for saving application settings and user data. Quite apart from userData, where your app’s configuration files are stored, it returns the absolute paths to User’s home, Desktop, Downloads and Documents as well.
All the Electron Docs! | Electron
For your reference, here is my version information.
$ node --version
v12.16.3
$ yarn --version
1.22.5
$ npm --version
6.14.8
$ tsc --version
Version 2.9.2
$ webpack --version
4.44.1
$ grep electron package.json
"electron-debug": "^3.1.0",
"electron-devtools-installer": "^3.1.1",
"electron-log": "^4.2.4",
"electron-store": "^6.0.0",
"electron-updater": "^4.3.5",
"electron": "^10.1.3",
"electron-builder": "^22.8.1",
$ cat /etc/os-release
NAME="Ubuntu"
VERSION="18.04.5 LTS (Bionic Beaver)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 18.04.5 LTS"
VERSION_ID="18.04"
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
VERSION_CODENAME=bionic
UBUNTU_CODENAME=bionic
