vue-cli-plugin-electron-builder: Vue Devtools not loading

Describe the bug After the first initial run when the devtools are still being loaded, they’re not available anymore.

When running npm run electron:serve I get this warning message:

(node:16668) ExtensionLoadWarning: Warnings loading extension at C:\Users\oasch\AppData\Roaming\sealas-desktop\extensions\nhdogjmejiglipccpnnnanhbledajbpd: Unrecognized manifest key 'browser_action'. Unrecognized manifest key 'update_url'. Permission 'contextMenus' is unknown or URL pattern is malformed. Cannot load extension with file or directory name _metadata. Filenames starting with "_" are reserved for use by the system.

Which is most likely coming from this line:

await installExtension(VUEJS_DEVTOOLS)

package.json:

"vue-cli-plugin-electron-builder": "^2.0.0-rc.4",

It seems possible to “fix” this by deleting the temporary build and forcing a rebuild.

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 27 (7 by maintainers)

Most upvoted comments

@Chappie74 The await code is for win.loadURL(process.env.WEBPACK_DEV_SERVER_URL), likely around line 32.

+12

nklayman on Jul 25, 2020

Can those of you with the issue please try this: https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/776#issuecomment-639099375 (adding await)? It seemed to work for everyone in that issue, and it seems like the same problem.

nklayman on Jul 24, 2020

I was experiencing this problem using the following setup:

{
  "name": "helping",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "NODE_ENV=development vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },
  "main": "background.js",
  "dependencies": {
    "@electron/remote": "^1.1.0",
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "electron": "^12.0.0",
    "electron-devtools-installer": "^3.1.0",
    "vue-cli-plugin-electron-builder": "~2.0.0"
  }
}

When booting up the application using: npm run electron:serve, the dev-tools were not opening. I was able to solve this by updating the following in background.js:

update all instances of VUEJS_DEVTOOLS to VUEJS3_DEVTOOLS

This solved it for me, Thanks!!!

RhysLees on Jun 23, 2021

I was experiencing this problem using the following setup:

{
  "name": "helping",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "NODE_ENV=development vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },
  "main": "background.js",
  "dependencies": {
    "@electron/remote": "^1.1.0",
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "electron": "^12.0.0",
    "electron-devtools-installer": "^3.1.0",
    "vue-cli-plugin-electron-builder": "~2.0.0"
  }
}

When booting up the application using: npm run electron:serve, the dev-tools were not opening. I was able to solve this by updating the following in background.js:

update all instances of VUEJS_DEVTOOLS to VUEJS3_DEVTOOLS

rv-dswanson on Jun 7, 2021

Thanks to @nklayman my problem is fixed now 👍

Although I can see the warning anyway anything works fine with the DevTools. In my case the solution is https://gist.github.com/ton77v/25108a7d7c0da7c98c7e45cbaabf76f5#gistcomment-3397339

ton77v on Aug 11, 2020

well, unfortinately, i faced the same problem. It is still there

OverlyDramatic on Jul 21, 2020

I’m going to close this as the workaround I posted fixed it for @DKhalil and others. The await will be added by default with the next release of the plugin.

@Stanzilla please open a new issue that follows the bug report template so that I can get more information and try and figure out why the fix didn’t work for you.

@ton77v you’re issue doesn’t seem to be related to devtools, rather just not being able to await the loading. I’ll try out your gist soon and see if I can figure out a solution.

nklayman on Jul 29, 2020

Experiencing the same issue. I swear it was working yesterday and now it’s just not showing up.

Chappie74 on Jul 23, 2020

@nklayman well that’s why the line await installExtension(VUEJS_DEVTOOLS) is in there, because I did follow the upgrade instructions 😉

DKhalil on Jul 21, 2020