Electron-builder: Built application displays nothing but a white screen

[kingerking]

So when I build my project no errors are shown during the building process, but when I try to open the built version it simply displays a white screen upon opening. My build settings in the package.json looks like so:

  "build": {
    "appId": "com.example.electron-cra",
    "files": [
      "**"
    ],
    "directories": {
      "buildResources": "."
    }
  },

and my "pack" npm script is simply calling "electron-pack"

[dwalintukan]

I am having the same issue. Previously it was working fine. FYI, I am using restify to serve a static webpage and using electron to go to the localhost in which it is ported to.

[venkatgoud]

I have add similar problem before. Turns out that the path to css and js was incorrect.
Are there are any errors in DevTools console?

[gknapp]

I've been struggling with the same issue. I think it's a problem with the path to resources as @venkatgoud mentioned. I noticed today that if I am in one directory, run the executable, the application works, if I cd to another, I am presented with a blank screen.

My BrowserWindow.loadURL() and renderer src paths are relative, I've tried absolute but still have the same issue. I'm using file:// URLs to access them.

If I run the application from the project directory with electron ., it works fine. Once I build a nsis installer, I get a blank screen after install.

I've not found a solution yet but have just stumbled across the electron docs on application packaging. It seems that reading resources from asar files should be transparent from within your source code.

I've tried the documented method in the quick start examples:

browserWindow.loadURL(url.format({
  pathname: path.join(__dirname, "index.html"),
  protocol: 'file:',
  slashes: true
}));

Within my app.asar my files are in the /build/ directory, so my code looks like: path.join(__dirname, "build/index.html").

electron: 1.8.6
electron-builder: 20.11.1
node: 8.5.0
yarn: 1.6.0

[N4G1B4T0R]

Hi, I got the same issue and I figure out this using devtools

mainWindow.webContents.openDevTools();
mainWindow.webContents.on("devtools-opened", () => {
     mainWindow.webContents.closeDevTools();
 }); 

I don't know how but it works for me. I guess, it would be helpful for u.

[Melegy90]

Why is this closed? No one provided any answer and this error still persists with me and I'm using the latest version to date (12.2.0)

[develar]

Because it is not electron-builder issue, please debug what's wrong using debugger/other tools.

[DanX3]

It may be a dump answer, but in my case I was using single quote character ' instead of a backtick `
I didn't know that backticks allows expansion of their argument

[Phiiii]

If any of you guys use React Router, one of the thing that might break your Electron build is BrowserRouter.

Using HashRouter will fix this problem.

[amolngt]

If any of you guys use React Router, one of the thing that might break your Electron build is BrowserRouter.

Using HashRouter will fix this problem.

i updated electron --- v4.0.6
m using 64bit windows OS
Packaging app for platform win32 x64 using electron v1.7.16-- command while packaging

blank white screen after one day..
Please Help

[amolngt]

It may be a dump answer, but in my case I was using single quote character ' instead of a backtick `
I didn't know that backticks allows expansion of their argument

solved probelm?
i updated electron --- v4.0.6
m using 64bit windows OS
Packaging app for platform win32 x64 using electron v1.7.16-- command while packaging

blank white screen after one day..
Please Help

[7E2678562852987564757825]

Could help : this line, in the main process, right after the imports, solved the problem in our case.

require('electron-debug')();

[sscullen]

Using MemoryRouter instead of BrowserRouter worked for me. https://stackoverflow.com/questions/47274378/react-router-v4-electron-does-a-timeline-exist-where-they-play-nice-together/47391340#47391340

[pbaldridge]

Could help : this line, in the main process, right after the imports, solved the problem in our case.

require('electron-debug')();

Just a quick note here, if you use symantec, there is a good chance it will quarantine your .exe as soon as it's built if you add this require. I really, really despise symantec.

[conceptdeluxe]

Thx @Phiiii, this actually solved it 👍

For the sake of completeness, here is the solution for Vue as well:

const router = new VueRouter({
    mode : 'hash',
    routes,
});

[mohamed1408]

I have add similar problem before. Turns out that the path to css and js was incorrect.
Are there are any errors in DevTools console?

dev tools not displaying but everything are ther but just not displaying including menus.

[laclance]

I have the same issue with an application that was working fine previously. No dev tools or menus, not sure how to debug

[laclance]

It seems app works when built without a windows code signing certificate but doesnt work when built with a valid certificate. We have another app though using the same certificate and it works fine.

[KillingJacky]

Thx @Phiiii, this actually solved it 👍

For the sake of completeness, here is the solution for Vue as well:

const router = new VueRouter({
    mode : 'hash',
    routes,
});

Confirm, same issue resolved. Thanks @Phiiii @conceptdeluxe

[kevincastejon]

I'm not using any router but I still got blank screen when app is built, in the earlier stages of my app developement it was working just fine, I really don't know what caused this.
What solution do you have for non-router-users ?

[mohamed1408]

It seems app works when built without a windows code signing certificate but doesnt work when built with a valid certificate. We have another app though using the same certificate and it works fine.

Hi laclance actually the problem is in gpu
so run the app through cmd by disabling gpu

Path\to\your.exe --disable gpu

[Faksprod]

Same problem here. Blank screen after opening my signed appName.app or even after having installed the appName.pkg file. How am I suppose to get logs to investigate on this problem once the app has been signed? No error thrown in the Terminal during building and signing process.

Everything work fine when running electron .

I'm not using any router. Actually, I'm doing this test by using the electron-quick-start example app, so I don't think the problem could comes from any part of the code in the main.js, preload.js or rendere.js files in which I didn't change anything.

I'm using:

"electron": "^5.0.13",
"electron-builder": "^22.0.0"

I'm trying to sign my app for a MAS submission. Thanks to this post I succeed the step of signing my .app by following instructions on this blog.

Signing seems ok. But now... Blank screen!
Any advises guys? Thanks!

[semanticbodger]

For me, this was caused by my adding a self-sign localhost cert to my certificates. When I removed it from Windows using the 'MMC' utility, the app came back up.

[ibalaji777]

Thx @Phiiii, this actually solved it 👍

For the sake of completeness, here is the solution for Vue as well:

const router = new VueRouter({
    mode : 'hash',
    routes,
});

THANK U MAN
WORKING GOOD

[HemantKumar01]

if you have an icon defined in electron's main.js(in Browser window), the problem maybe there. no worries, you can solve it
check this-
https://stackoverflow.com/q/63878416/13114354

[ntoporcov]

Been looking at this issue for a little while. For me it was caused because my app wasn't able to access environment variables from the built version.

A great way to find out what causes it (on windows at least) is starting the app from the command line. The error will get outputted there.