Vue Devtools not loading

[DKhalil]

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.

[nklayman]

Have you followed the upgrade guide for 2.0.0-rc.4 that has you switch to electron-devtools-installer? I think this may solve your problem.

[OverlyDramatic]

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

[DKhalil]

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

[ton77v]

I have the same issue. Starting yesterday the Vue devtools just disappeared 🥶

I've updated vue-cli-plugin-electron-builder from 1.4.6 to v2.0.0-rc.4 and followed the instructions about installExtension - nothing changed.

After I've updated Electron to 9.0.0 I started getting the same warnings. The extension still not works.

Tried that solution without any success:
#776 (comment)

Since until yesterday seems that everything was working fine, maybe the reason is in Vue devtools update or something like that?

[nklayman]

@DKhalil my bad, for some reason I thought I saw the old method there 🤦. It works fine for me, and I don't have any suggestions to fix it. Try using the electron-quick-start repo and adding electron-devtools-installer, then installing vue devtools. If it doesn't work there, then it is an issue with vue devtools or electron-devtools-installer.

[DKhalil]

@nklayman what does your package.json look like? Maybe there's a version mismatch happening.

"@vue/cli-plugin-babel": "^4.4.6",
    "@vue/cli-plugin-eslint": "^4.4.6",
    "@vue/cli-plugin-pwa": "^4.4.6",
    "@vue/cli-plugin-router": "^4.4.6",
    "@vue/cli-plugin-unit-jest": "^4.4.6",
    "@vue/cli-plugin-vuex": "^4.4.6",
    "@vue/cli-service": "^4.4.6",
    "@vue/eslint-config-standard": "^5.1.2",
    "@vue/test-utils": "^1.0.3",
    "babel-eslint": "^10.1.0",
    "electron": "^9.1.1",
    "electron-devtools-installer": "^3.1.1",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.2.2",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2",
    "spectron": "^11.0.0",
    "vue-cli-plugin-electron-builder": "^2.0.0-rc.4",
    "vue-cli-plugin-pug": "~1.0.7",
    "vue-template-compiler": "^2.6.11"

[nklayman]

My package.json is pretty much the same. Can you create an example repo that demonstrates the error so I can run it on my machine?

[DKhalil]

@nklayman @ton77v @OverlyDramatic One more piece to this whole thing: I'm on Windows 10, are any of you on Linux?

[nklayman]

I use Ubuntu, but I can test on windows soon.

[ton77v]

@nklayman @ton77v @OverlyDramatic One more piece to this whole thing: I'm on Windows 10, are any of you on Linux?

I'm @ Windows10

[OverlyDramatic]

Windows 10 1909 there.

i find that devtools would fail to load every day when i npm run electron:serve for the first time. But when i close and reopen it, i can find Devtools there. :)

here is my package.json. by the way i used typescript.

{
  "name": "balabala",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },
  "main": "background.js",
  "dependencies": {
    "@types/pouchdb": "^6.4.0",
    "core-js": "^3.6.5",
    "jsmediatags": "^3.9.3",
    "pouchdb": "^7.2.1",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^8.4.2",
    "vue-router": "^3.2.0",
    "vuetify": "^2.2.11",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@types/jest": "^24.0.19",
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.4.0",
    "@vue/cli-plugin-eslint": "~4.4.0",
    "@vue/cli-plugin-router": "~4.4.0",
    "@vue/cli-plugin-typescript": "~4.4.0",
    "@vue/cli-plugin-unit-jest": "~4.4.0",
    "@vue/cli-plugin-vuex": "~4.4.0",
    "@vue/cli-service": "~4.4.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "^1.0.3",
    "electron": "^9.0.0",
    "electron-devtools-installer": "^3.1.1",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^6.2.2",
    "lint-staged": "^9.5.0",
    "node-sass": "^4.12.0",
    "prettier": "^1.19.1",
    "sass": "^1.19.0",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3",
    "vue-cli-plugin-electron-builder": "~2.0.0-rc.4",
    "vue-cli-plugin-vuetify": "~2.0.7",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.3.0"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "vue-cli-service lint",
      "git add"
    ]
  }
}

[DKhalil]

This might be related to this issue? electron/electron#24011

Edit: Downgrading to electron@8.4.0 seems to fix it, so it's probably an electron@9 issue

[OverlyDramatic]

im going to check it out. thanks there 👍

[Chappie74]

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

[ton77v]

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

Exactly the same happened with me few days ago. And the weird thing is that I had Electron 5 that time and did all the updates AFTER the problems appeared

[nklayman]

Can those of you with the issue please try this: #776 (comment) (adding await)? It seemed to work for everyone in that issue, and it seems like the same problem.

[Chappie74]

Can those of you with the issue please try this: #776 (comment) (adding await)? It seemed to work for everyone in that issue, and it seems like the same problem.

Sadly mine already had the await. Just to clarify you mean like this right?

// Install Vue Devtools
        try {
            await installExtension(VUEJS_DEVTOOLS)
        } catch (e) {
            console.error('Vue Devtools failed to install:', e.toString())
        }

[nklayman]

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

[Chappie74]

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

Oh I completely missed that with my hurried/frustrated reading. Worked like a charm. Thanks, bro.

[ton77v]

win.loadURL(process.env.WEBPACK_DEV_SERVER_URL

I've tried this before without any success, in my case using 'await' results in the application doesn't load at all.

This is probably because I have 2 windows, one is "splash" to show during the load

I've created the gist with the relevant code:
https://gist.github.com/ton77v/25108a7d7c0da7c98c7e45cbaabf76f5

Any ideas on how to implement "..wait" in my case? 🤔 thx

[Stanzilla]

I added await to the webpack server but I'm still getting the same issue as the OP.

[DKhalil]

@nklayman yes, for me that fixes it with electron@9.1.1 ! Thanks

[nklayman]

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.

[mazhewei]

In my case, Vue Devtools works well, but the warning still exists.
I think this may be a version issue.
I'm using electron 9.1.2 / electron-devtools-installer 3.1.1 / vue-cli-plugin-electron-builder 2.0.0-rc.4
I upgraded from an old version, I tried to delete the extension and let it reinstall, but the warning still exists.

[ton77v]

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

[rv-dswanson]

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

[RhysLees]

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!!!!!!