Vue-cli-plugin-electron-builder: Electron 6.0.0+ does not launch in Windows 10 Dark Mode

[caesar]

Describe the bug
When using vue-cli-plugin-electron-builder with the Electron 6.0.0, it hangs and Electron is not launched if Windows 10's dark mode is enabled. It works fine in light mode.

This is due to a bug introduced in [email protected] which causes Electron to hang on launch in Win10 dark mode if any dev tools extensions are installed.
VCPEB installs Vue.js Devtools automatically, triggering this bug.

To Reproduce
Steps to reproduce the behaviour:

1. Ensure Windows "choose your color" setting is set to "Dark".
2. vue create test (accept all defaults)
3. cd test
4. vue add electron-builder (accept all defaults)
5. npm i [email protected]
6. npm run electron:serve

Expected behaviour
Electron should launch regardless of whether Windows is in Light or Dark mode.

Environment

• OS and version: Windows 10 Home 1903
• node version: 12.7.0
• npm version: 6.10.0
• yarn version (if used): n/a
• vue-cli-plugin-electron-builder version: 1.3.6
• electron version: 6.0.0
• other vue plugins used: none
• custom config for vcp-electron-builder: none
• (if possible) link to your repo: n/a

Additional context
See https://github.com/electron/electron/issues/19468 for the Electron bug which causes this issue.

Workaround for now is to disable the automatic installation of Vue.js Devtools in background.js, and delete your app's data directory in %appdata% to remove already-installed devtools.

[caesar]

Note from the electron issue:

If you add app.removeAllListeners('ready') before app.on('ready') in background.js, the app launches fine.
So some kind of ready event listener is causing a problem somewhere.

vue-cli-plugin-electron-builder doesn't seem to register a ready handler, but maybe a dependency does?

[caesar]

Can confirm that this is an Electron bug, not an issue with vue-cli-plugin-electron-builder, as it also happens with (any) DevTools extension installed directly.

[caesar]

I'm going to reopen this, because the above Electron bug isn't fixed in the released version of Electron 6.0.0, and the only workaround is to not load any DevTools extensions (and to delete the app's cache directory, to uninstall already-installed extensions).

The fix belongs with Electron, but in the meantime this issue. is best left open to track the fact that a vanilla vcpeb-scaffolded app won't launch in Windows 10 Dark Mode due to automatically installing Vue.js Devtools.

[3zbumban]

I can confirm this issue:

Environment:

• Microsoft Windows 10 Pro Build 17134
• node v12.4.0
• electron v6.0.0
• npm 6.9.0
• yarn 1.17.3
• vue-cli-plugin-electron-builder ^1.3.6

The app launches correctly after changing to Light mode. Also when build.
This behavior doesn't appear with electron-quick-start.

[caesar]

@3zbumban the fix really belongs with Electron, but for the moment you can work around it by not installing devtools (comment out the line which installs the devtools in your background.js) and deleting your app's data directory to remove the already-installed devtools.

Since this bug was shipped in the released version of Electron, I don't know whether @nklayman might want to disable the default behaviour of automatically loading the devtools for the moment in this module?

[3zbumban]

@caesar can you explain a little further what you mean by

and deleting your app's data directory to remove the already-installed devtools.

thank you in advance!

[caesar]

Electron remembers installed devtools, so just removing the installation which runs on every launch won't delete the already-installed tools.
The installed tools are stored in your application's data directory which on Windows is C:\Users\[yourname]\AppData\Roaming\[appname] (I think it's Roaming, but you might want to check Local too).
Delete that directory, and your app will be in a clean state with no devtools installed.

If you find this annoying you can go and 👍 on https://github.com/electron/electron/issues/19468 to upvote that issue.

[3zbumban]

@caesar thank you!
C:\Users\[yourname]\AppData\Roaming\[appname] is the right path.
I can also confirm the workaround now.
This is a really interesting bug since the only thing really changes with darkmode/lightmode settings is the background color of the application menu, and this has most likely nothing to do with vue-devtools.
Even if i use just the electron-quick-start Projekt and just add the vue-devtools this issue occurs, but only in dark mode and only after the first start. Also the extension never really gets shown (not in dark mode nor in light mode) in the DevTools. Since this seems to apply to DevTools extensions in general the bug may be somewhere in the Installation process. Somewhere in the BrowserWindow.addDevToolsExtension API.

[nklayman]

In v1.4.0 of this plugin, I added support for Electron 6. If Eelctron 6 is selected when adding the plugin, the vue devtools install will be commented out and a message will explain the problem and link to this issue. Thanks for all of your help investigating! I will leave this issue open until it is solved by electron.

[caesar]

Great, thanks @nklayman!

[jonathanadams]

Is this still applicable in the latest version of Electron v7.0.0?

[Stanzilla]

7.0.1 fixed https://github.com/electron/electron/pull/20844, was that the problem?

[senden9]

@Stanzilla not for me. The electron window show still not up if I enable await installVueDevtools().

Have the latest electron installed according to package-lock.json:

 "electron": {
      "version": "7.0.1",
      "resolved": "https://registry.npmjs.org/electron/-/electron-7.0.1.tgz",
      "integrity": "sha512-eMFoZIO0+eOAE9FyNC/f0Vp8l/sJziTMK+axEt2XIpGCagom1IZgUKPGwmHUcftZCX5lNKh+Tv53T0GcNnNTKQ==",
      "dev": true,
...

[Demozo]

This bug only happens when Windows 10's dark mode is set for apps.

"Choose your colour" -> "Custom"
"Windows mode" -> "Dark"
"App mode" -> "Light"

Still works, but setting app mode to dark causes the bug to occur.

[Ahriana]

yeah i can confirm im getting the same behavior as pre-patch
electron@^7.1.1: version "7.1.1" resolved "https://registry.yarnpkg.com/electron/-/electron-7.1.1.tgz#98be17d850e64689a09ab6dd1e437b36307f2fcf" integrity sha512-NJPv4SuMJlRUtXBd/Ey9XKSLOZ4+hxsOrHHPXwrBQNNdeZesoSrTMgPymee/FwMRtrSt0Pz8NccEZUu/pxmbhQ==

[namdien177]

7.1.2 and still facing this error.

"electron": "7.1.2", "electron-builder": "21.2.0"

repo: https://github.com/namdien177/gitme-git-client

[sabifa]

Any progress on this?

Edit:
So after finding this comment I created the following workaround using concurrently and wait-on.

It switches to light mode first, starts the application and concurrently waits for it to finish compiling so it can switch back to dark mode.

dark.cmd

@echo off
%1 %2
mshta vbscript:createobject("shell.application").shellexecute("%~s0","goto :runas","","runas",1)(window.close)&goto :uacfalse
:runas
REG ADD HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Themes\Personalize /v AppsUseLightTheme /t REG_DWORD /d 0 /f
goto :eof
:uacfalse

light.cmd

@echo off
%1 %2
mshta vbscript:createobject("shell.application").shellexecute("%~s0","goto :runas","","runas",1)(window.close)&goto :uacfalse
:runas
REG ADD HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Themes\Personalize /v AppsUseLightTheme /t REG_DWORD /d 1 /f
goto :eof
:uacfalse

electron:serve script:

"electron:serve": "yarn win-light && concurrently \"vue-cli-service electron:serve\" \"yarn win-dark\"",
"win-light": "cd scripts && light.cmd",
"win-dark": "wait-on http://localhost:8080/favicon.ico -d 4000 && cd scripts && dark.cmd"

If the admin prompts to switch the themes are annoying to you, start VSCode as an admin.

I don't know how to feel about this but it works 😄

[ChrisKader]

@echo off
%1 %2
mshta vbscript:createobject("shell.application").shellexecute("%~s0","goto :runas","","runas",1)(window.close)&goto :uacfalse
:runas
REG ADD HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Themes\Personalize /v AppsUseLightTheme /t REG_DWORD /d 1 /f
goto :eof
:uacfalse

Admin rights are not needed to modify these registry variables. Further, running any application (Especially VSCode) as administrator for no reason is a very ignorant recommendation.

Below are 3 scripts that can be added to your package.json that will enable light mode, execute electron:serve and then enable dark mode when the electron process ends. They do NOT require admin rights. This COULD actually be merged into just one script but modularity is key, right?

"electron:light": "yarn win-light && yarn electron:serve && yarn win-dark",
"win-light": "REG ADD HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Themes\\Personalize /v AppsUseLightTheme /t REG_DWORD /d 1 /f",
"win-dark": "REG ADD HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Themes\\Personalize /v AppsUseLightTheme /t REG_DWORD /d 0 /f",

[Lothindir]

This issue is still relevant in Electron 8.0.0

[sabifa]

This issue seems to be fixed with 8.2.5!

[rathboma]

@nklayman If you tell folks to use 8.2.5+ or 9.0.0+ you can close this because it's fixed.

[nklayman]

Just confirmed that it does work. I will publish an update to the plugin tomorrow.

[nklayman]

v2.0.0-rc.3 will enable devtools on electron 8/9!