Blank screen on hot reload, devtools disconnect, hang on page reload

[rathboma]

correction
See below.

I see this behavior when hot reload cannot reload the code I've changed and a full reload is triggered by webpack.

Describe the bug

I upgraded to Electron 9 and vue-cli-plugin-electron-builder 2.0 beta 6.

Since then the electron app loads fine initially, then if I make a change and the app hot-reloads the screen is blank and devtools are disconnected.

• All the js files seem empty at this point

If I force-reload the page the app comes back fine, but Vue devtools hang.

Here's a gif of it happening

To Reproduce
Check out Beekeeper Studio

• yarn install
• yarn run electron:serve
• change a file
• witness

Expected behavior

• Hot reload should work normally

Environment (please complete the following information):
You can see all the config in the Beekeeper repo (listed above), it's pretty standard.

I know this is probably a problem with one of the other tools in the toolchain, but would appreciate some expert input!

[xieerduos]

我也遇到了此问题，~~~~~~

Reload，Fore-Reload 白屏

  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },

解决方案：
createWebHistory(process.env.BASE_URL), 改为 createWebHashHistory(process.env.BASE_URL),

import {createRouter, createWebHashHistory, createWebHistory} from 'vue-router';
const router = createRouter({
    // history: createWebHistory(process.env.BASE_URL),
    history: createWebHashHistory(process.env.BASE_URL),
    routes
});

export default router;

[rathboma]

Thanks for the idea!

unfortunately it's not a router problem - I'm not using the router!

So actually hot reload DOES work fine.

On further investigation, the issue happens when a full reload is forced, when there's a change to a library it can't hot reload.

In Electron 8, this worked fine, we recently upgraded to Electron 9 due to security fixes and it started happening.

We also upgraded to beta6 of the cli plugin if that is related.

@nklayman hoping to get your thoughts.

[nklayman]

The plugin version shouldn't have anything to do with it as the logic related to this hasn't changed in a long time. I cloned the repo and spent some time investigating it but I couldn't figure out what the issue is. I googled around and couldn't find anything related either. You could try upgrading to vue cli v5 alpha which uses webpack v5, that might fix it. Other than that, I don't know of any solutions.

[rathboma]

Thanks for checking, you rock.

I'll poke around. I'm not sure why upgrading electron and the plug-in would cause this either. It smells like a transitive dependency issue.

I'll report back here if I figure it out.

[rathboma]

So I did a bit of experimentation -- this problem starts when moving from Electron 8.x to >= 9.x.

I know they changed the extension model so that they can't load from a file url, but that's not the problem here, but it's likely related to those changes. Could be webpack HMR setting window.location causing a problem or something like that

I'll see if I can replicate it on a fresh project

[erickximenes]

To fix this, you may have to disable Vue Devtools by removing the following lines from your src/background.(js|ts) file:

if (isDevelopment && !process.env.IS_TEST) {
  // Install Vue Devtools
  await installExtension(VUEJS_DEVTOOLS)
}

In src/router.(js|ts) change:

Vue2:

if (isDevelopment && !process.env.IS_TEST) {
  await installExtension(VUEJS_DEVTOOLS)
}

Vue 3:

const router = createRouter({
history: process.env.IS_ELECTRON ? createWebHashHistory() : createWebHistory(),
})

[nklayman]

Okay, I managed to reproduce the issue on a smaller app and found what caused it: native modules. If the code imports a native module somewhere, a HMR full reload will cause the page to go blank and devtools to disconnect. I have no idea what causes this, however.

[rathboma]

Thanks for digging in!

I guess I'll file this with electron? Is that the right place in the stack if you had to take a guess?

[nklayman]

If this only started happening after upgrading electron, then it is most definitely electron's fault. When opening the issue, I'd suggest providing a simple app that just imports a native module and nothing else so that they can debug it better. Thanks!

(Closing this since I don't think I can really do anything about it)

[rathboma]

Do you have the source code of the test app you used?

[rathboma]

NM. Here's a simple replication - https://github.com/rathboma/electron-hotreload-example

[rathboma]

FYI - I fixed this by moving from node-sqlite3 to better-sqlite3