nklayman / vue-cli-plugin-electron-builder

Easily Build Your Vue.js App For Desktop With Electron
https://nklayman.github.io/vue-cli-plugin-electron-builder/
MIT License
4.12k stars 280 forks source link

Awaiting win.loadURL in createWindow() blocks events from firing #1620

Open skulls-dot-codes opened 2 years ago

skulls-dot-codes commented 2 years ago

Describe the bug The template for background.js uses await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL) to load the vue server in development. For some reason this prevents the dom-ready, did-finish-load, ready-to-show events in the main process from firing reliably and also the mounted event in vue.

To Reproduce Create a new project and create listeners for any of the events above. They most likely will not fire. Removing await from win.loadURL will allow these events to fire.

Expected behavior The development server or build process should not interfere with the events.

Environment (please complete the following information): Custom vue.config.js to enable node integration:

module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true
    }
  }
}

terminal output from running vue info:

Environment Info:

  System:
    OS: Windows 10 10.0.19044
    CPU: (12) x64 Intel(R) Core(TM) i7-8086K CPU @ 4.00GHz
  Binaries:
    Node: 16.13.1 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 96.0.4664.110
    Edge: Spartan (44.19041.1266.0), Chromium (96.0.1054.57)
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1
    @vue/babel-helper-vue-transform-on:  1.0.2
    @vue/babel-plugin-jsx:  1.1.1
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  4.5.15
    @vue/babel-preset-jsx:  1.2.4
    @vue/babel-sugar-composition-api-inject-h:  1.2.1
    @vue/babel-sugar-composition-api-render-instance:  1.2.4
    @vue/babel-sugar-functional-vue:  1.2.2
    @vue/babel-sugar-inject-h:  1.2.2
    @vue/babel-sugar-v-model:  1.2.3
    @vue/babel-sugar-v-on:  1.2.3
    @vue/cli-overlay:  4.5.15
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.15
    @vue/cli-plugin-router: ~4.5.0 => 4.5.15
    @vue/cli-plugin-vuex:  4.5.15
    @vue/cli-service: ~4.5.0 => 4.5.15
    @vue/cli-shared-utils:  4.5.15
    @vue/component-compiler-utils:  3.3.0
    @vue/preload-webpack-plugin:  1.1.2
    @vue/web-component-wrapper:  1.3.0
    vue: ^2.6.11 => 2.6.14
    vue-analytics:  5.22.1
    vue-cli-plugin-electron-builder: ~2.1.1 => 2.1.1
    vue-cli-plugin-tailwind: ~2.2.18 => 2.2.18
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.9.8 (16.8.3)
    vue-router: ^3.2.0 => 3.5.3
    vue-style-loader:  4.1.3
    vue-template-compiler: ^2.6.11 => 2.6.14
    vue-template-es2015-compiler:  1.9.1
    vue-unicons: ^3.3.1 => 3.3.1
  npmGlobalPackages:
    @vue/cli: Not Found
nklayman commented 2 years ago

Hmm, this is an interesting issue. I added the await because it fixed some issues with devtools, but I think using .then would work for that. Try using this code and let me know if it fixes your issue:

win.loadURL(process.env.WEBPACK_DEV_SERVER_URL).then(() => {
      if (!process.env.IS_TEST) win.webContents.openDevTools()
    })
roberttolton commented 7 months ago

Old issue I know, sorry, but just wanted to +1 and say I also had this issue and was scratching my head as to why the events weren't firing.

Removed async / await from my window creation functions, used .then() and they started working..!