Electron 6 does not launch in Win10 dark mode with DevTools extensions installed

[caesar]

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for an issue that matches the one I want to file, without success.

Issue Details

• Electron Version:
  • 6.0.0
• Operating System:
  • Windows 10 (1903)
• Last Known Working Electron version:
  • 6.0.0-beta.13

Expected Behavior

Electron should launch and display a window regardless of whether Windows is in Light or Dark mode.

Actual Behavior

If Windows is in Dark Mode, then Electron will hang on launch if any DevTools extension is installed.

This behaviour only occurs if a devtools extension has been installed on a previous run.

Everything is fine if Windows is in Light mode when the app is launched.

To Reproduce

UPDATED REPRO (see comment history for original version)

1. Ensure Windows "choose your color" setting is set to "Dark".
2. Clone and install repro and launch Electron:

   $ git clone https://github.com/caesar/electron-darkmode-crash.git
   $ cd electron-darkmode-crash
   $ npm i
   $ npm run start

   The first time, Electron will launch normally.
3. Once electron has launched, close it.
4. Launch Electron again:

   $ npm run start

   The second time, Electron will hang and never display a window.

The above repro contains the following changes from electron-quick-start:master : caesar/electron-darkmode-crash@65ab2a0

Additional Information

I originally thought this might be an issue with vue-cli-plugin-electron-builder and filed a bug at nklayman/vue-cli-plugin-electron-builder#378, but that possibility has now been eliminated as simply installing Vue.js Devtools or React Devtools in a clean clone of electron-quick-start is enough to trigger the bug.

[MarshallOfSound]

@caesar I can't reproduce with a minimal electron launch (6.0.0-beta.14) launches fine on my windows machine. I did find a different issue with dark mode though and will raise that shortly, but it doesn't hang like you describe. If I get a chance I'll try your builder repro but it's not super minimal 😄

[caesar]

@MarshallOfSound no, it doesn't fail with just electron, which is why I'm not certain it's a problem with Electron and not with vue-cli-plugin-electron-builder. But at any rate it's triggered by something that changed in electron@6.0.0-beta.14, because it works on older versions.

I'm afraid that's the most minimal repro I've found so far, as I haven't yet found a way to reproduce without vue-cli-plugin-electron-builder installed… Sorry! 😕

I'm hoping @nklayman might be able to help isolate this as he obviously knows how vue-cli-plugin-electron-builder launches Electron and what it might be doing differently from a minimal electron launch.

[caesar]

Stepping through with the debugger, the will-finish-launching event is being emitted, and then it's hanging while handling the ready event (but before calling the event handlers registered for ready).
Not sure if that helps 🤷‍♂️

[MarshallOfSound]

@caesar I've stepped through this because it might be a bad issue. Turns out that somehow the vue plugin is causing the app to quit. The plugin itself adds a ready event handler and that handler causes the app to quit.

If you do app.removeAllListeners('ready') before app.on('ready') the app launches just fine. Not entirely sure what's going on their and it may still be something going wrong in Electron but for now the investigation for this should firmly belong over in nklayman/vue-cli-plugin-electron-builder#378

[caesar]

@MarshallOfSound thanks for looking into this!

That's pretty weird! A search of the vue-cli-plugin-electron-builder repo doesn't turn up any instances of a ready listener being registered, though I guess a dependency could be doing it.

To me two things are weird though:

• it only happens in dark mode
• it only started with electron 6.0.0-beta.14

Do you have any ideas of what could have changed in beta 14 that might affect this, or what could be different in dark mode?

[MarshallOfSound]

So turns out the ready listener is actually internal electron chrome extension logic. The actual cause here is something in vuejs-devtools but also in our changeset for beta.14 --> beta.15 we have 019e605

But that commit has nothing to do with dark mode

But also in that changeset is bb0f4fd which is very much to do with dark mode but nothing to do with chrome extensions.

I feel like their those are the pieces I'm just missing the glue that puts them together 🤔

[caesar]

Curiouser and curiouser! I don't get it either but a couple of thoughts:

The actual cause here is something in vuejs-devtools

Even if I remove the installVueDevtools call I still get the same problem. It seems to be triggered by something in vue-cli-plugin-electron-builder or a dependency, but I don't think it's the dev tools.

but also in our changeset for beta.14 --> beta.15 we have

But it doesn't work with beta.14 either, it's beta.13 --> beta.14 where the relevant change must be surely?
[Edit: I see the commits you mention are in that changeset, I guess your beta.14 --> beta.15 was a typo 👍 ]

[caesar]

I should also note that Vue Devtools does fail to install on beta.14+, whereas it installs fine on previous versions – but I think that's a separate issue, because even without Vue Devtools Electron still doesn't launch in dark mode.

[MarshallOfSound]

Even if I remove the installVueDevtools call I still get the same problem. It seems to be triggered by something in vue-cli-plugin-electron-builder or a dependency, but I don't think it's the dev tools.

Electron caches the list of devtools extensions you've installed, completely wipe your electron app data directory after you remove the installVueDevTools call and it should start working 🤔

[caesar]

Duh, I should have thought of that. You're right.

So that eliminates vue-cli-plugin-electron-builder as a source of the bug; it's an incompatibility with Vue.js Devtools and Electron.

With that in mind I will post a more minimal testcase shortly.

[caesar]

New, minimal repro:

1. Ensure Windows "choose your color" setting is set to "Dark".
2. Clone and install repro and launch Electron:

   $ git clone https://github.com/caesar/electron-darkmode-crash.git
   $ cd electron-darkmode-crash
   $ npm i
   $ npm run start

   The first time, Electron will launch normally.
3. Once electron has launched, close it.
4. Launch Electron again:

   $ npm run start

   The second time, Electron will hang and never display a window.

Diff from electron-quick-start:master: caesar/electron-darkmode-crash@65ab2a0

[caesar]

Can 100% confirm this is an Electron bug now: same issue with React Devtools.

[caesar]

@MarshallOfSound just wondering, since 6.0.0 release seems to be scheduled for tomorrow – this seems like a pretty serious issue, is it considered a blocker for the release?

I unfortunately don't have an environment capable of building Electron at the moment or I'd do more to look into this, but I guess a git bisect on the few commits between beta-13 and beta-14 would at least find where the regression was introduced…

[caesar]

Hahaha, looks like I missed the release while writing my comment!
Guess it wasn't considered a blocker. 🤷‍♂️
Should probably at least be documented as a known bug I guess?

[MarshallOfSound]

@caesar Because the issue only comes into play with devtools extensions it's not serious enough to block the release. It's definitely on the list of things to fix though.

[caesar]

@MarshallOfSound fair enough, makes sense.
Congrats to everyone on the release by the way 👍

[mattyork]

This is blocking us from upgrading.

[MarshallOfSound]

@mattyork How? More information would be useful here. My current understanding of this issue is (a) it only impacts developers not end-users and (b) it is easily resolvable by using light mode when booting the app.

Obviously, this is an issue and it is on my backlog to look into and fix but it's not a high priority currently.

[soyFerrero]

Windows 10 Build 17763
node v12.4.0
electron v6.0.0
npm 6.9.0
yarn 1.17.3
"electron-devtools-installer": "^2.2.4",

The same issue. Uninstalling the "electron-devtools-installer" and clearing the cache continues with the issue.It doesn't solve me
Luckily I found this thread, I was going crazy looking for the problem

app.removeAllListeners('ready')
@MarshallOfSound solution work for me but doesn't work the devtools.

[mattyork]

@MarshallOfSound it's blocking us from upgrading because of this:

This behaviour only occurs if a devtools extension has been installed on a previous run.

We sometimes use our own debug mode on customers machines, which will install devtools extensions. If a customer, or even one of our own developers, runs into this bug, there's no easy search term given the log messages and the behavior of the app that will lead them to the "turn off dark mode" solution. It's going to be a frustrating time. Plus, based on this thread, it sounds like the exact problem is unclear, so I'm worried this will repro in more cases than what's listed.

[DanRYoung]

This issue is present in electron 7.1.10 as well.

[The-SLX]

Since we updated electron we've been hitting the same issue.
One thing I'd like to add (not sure if still relevant) is that I can get rid of the issue simply by removing the "DevToolExtensions" file which resides in the appdata/roaming folder.
However, it's created again when (re)launching, the issue only appears when launching with the file present (so if you delete the file you can start it again, one time).
I'm faced with fixing this issue and I would rather not have to come up with some convoluted way to get rid of that file before startup.
Anyone else has a proper workaround for this? Even catching it and showing a message would be something.

[skourismanolis]

Since we updated electron we've been hitting the same issue.
One thing I'd like to add (not sure if still relevant) is that I can get rid of the issue simply by removing the "DevToolExtensions" file which resides in the appdata/roaming folder.
However, it's created again when (re)launching, the issue only appears when launching with the file present (so if you delete the file you can start it again, one time).
I'm faced with fixing this issue and I would rather not have to come up with some convoluted way to get rid of that file before startup.
Anyone else has a proper workaround for this? Even catching it and showing a message would be something.

I've been using @wmhilton 's workaround (posted a few comments above) for a while and it works very well.

[stevebeauge]

I don't get why this painful issue isn't yet solved. The issue is 6 month old and I believe it's affecting a lot of people ?
Is there any technical challenge hard to solve ?

[The-SLX]

I've tried a few workarounds without success (seems I wasn't able to exactly pinpoint when electron creates that file).
As a workaround I've removed the Redux component from the devtools and this seems to solve the issue, without this extension of the devtools the issue no longer occurs.

This only solves your issue if you don't actually need that extension (which I don't) and the default devtools are sufficient.

installExtension(REDUX_DEVTOOLS)
to
installExtension()

[Stanzilla]

@MarshallOfSound hey there, any news from the team about this?

[wachidmudi]

Found temporary fix for this, add the following script to package.json

"dev:light": "yarn win-light && yarn dev && 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"

And, instead of using yarn dev command, use yarn dev:light. Basically it just switch the app theme into light without opening setting menu. Hope this help.
source

[Lothindir]

This issue is still relevant in Electron 8.0.0

[mcous]

We're encountering this issue in our Electron v6 app. Upon investigation: the 'ready' event is firing, but the 'ready' handler Electron attaches to setup the BrowserWindow's extension API is never returning, which means my own app's 'ready' listener is never called

• Link above is from v6.0.7, which our app is on
• It looks like this portion of the Electron codebase was just changed quite substantially by Tracking issue: //extensions integration #19447 + refactor: remove JS for non-native extensions shim #23340, could it maybe fix this issue?

I can work around this issue by prepending my app's startup function to the ready listener list rather than appending. Devtools installation still has to happen after the built-in ready happens and sets up the BrowserWindow's extension API:

// ...
// appended listener - app won't launch on Windows
app.once('ready', startUp)
if (config.devtools) app.once('ready', installDevtools)
app.once('window-all-closed', () => app.quit())
// ...

// ...
// prepended listener - app is able launch, devtools appear to install correctly
app.prependOnceListener('ready', startUp)
if (config.devtools) app.once('ready', installDevtools)
app.once('window-all-closed', () => app.quit())
// ...

[vkolova]

We've been having the same issue with one of our projects at work. I don't remember when exactly it started, but I finally just went back to light theme.

Then a month ago I setup same project on my personal PC, which have been set to dark mode basically since I got it. I'm going going through the motions, starting the app... Took me 15 minutes to realize it's working on a dark mode. Meanwhile still not working on my work machine. I don't know what the difference is.

[sentialx]

Does this still happen on 9.0.0-beta? There is a completely new extensions system natively based on Chromium which removes potential limitations from the JS implementation.

[zcbenz]

Updating to Electron 9 should be able to fix this issue, and we are very unlikely to fix a bug that only happens for <= 8.

[electron-triage]

see #19468 (comment)