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 electron@6.0.0-beta.14 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 electron@6.0.0-beta.15
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 electron/electron#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 electron/electron#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!