Electron-vue: Unable to install vue-devtools

[hxlnt]

I followed the steps in the installation guide. When I run npm run dev, I get the following errors. npm run build seems to work OK.

Error

┏ Electron -------------------

  Reading C:\Users\rache\clic-ev\dist\electron\manifest.json failed.

┗ ----------------------------

┏ Electron -------------------

  Error: ENOENT: no such file or directory, open 'C:\Users\rache\clic-ev\dist\electron\manifest.json'
      at Object.fs.openSync (fs.js:584:18)
      at Object.module.(anonymous function) [as openSync] (ELECTRON_ASAR.js:173:20)
      at Object.fs.readFileSync (fs.js:491:33)
      at Object.fs.readFileSync (ELECTRON_ASAR.js:506:29)
      at getManifestFromPath (C:\Users\rache\clic-ev\node_modules\electron\dist\resources\electron.asar\browser\chrome-extension.js:34:26)
      at Function.BrowserWindow.addDevToolsExtension (C:\Users\rache\clic-ev\node_modules\electron\dist\resources\electron.asar\browser\chrome-extension.js:373:22)
      at App.app.on (C:\Users\rache\clic-ev\dist\electron\main.js:2920:19)
      at emitTwo (events.js:111:20)
      at App.emit (events.js:194:7)

┗ ----------------------------

┏ Electron -------------------

  Unable to install `vue-devtools`:
   { Error: spawn C:\Users\rache\clic-ev\dist\electron\7zip-lite\7z.exe ENOENT
      at exports._errnoException (util.js:1050:11)
      at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)
      at onErrorNT (internal/child_process.js:367:16)
      at _combinedTickCallback (internal/process/next_tick.js:80:11)
      at process._tickCallback (internal/process/next_tick.js:104:9)
    code: 'ENOENT',
    errno: 'ENOENT',
    syscall: 'spawn C:\\Users\\rache\\clic-ev\\dist\\electron\\7zip-lite\\7z.exe',
    path: 'C:\\Users\\rache\\clic-ev\\dist\\electron\\7zip-lite\\7z.exe',
    spawnargs:
     [ 'x',
       'C:\\Users\\rache\\AppData\\Roaming\\Electron\\extensions\\nhdogjmejiglipccpnnnanhbledajbpd.crx',
       '-y',
       '-oC:\\Users\\rache\\AppData\\Roaming\\Electron\\extensions\\nhdogjmejiglipccpnnnanhbledajbpd' ] }

┗ ----------------------------

Development environment

• Node version: 7.0.0
• NPM version: 5.0.2
• vue-cli version: 2.8.2
• Operating System: Windows 10

[SimulatedGREG]

@hxlnt

Sorry for the issues; I totally forgot to handle this in the recent Milestone release. Just pushed out a fix.
https://github.com/SimulatedGREG/electron-vue/commit/9107e8f55aa9e5eef210307e5e438c280cb029aa

[hxlnt]

Thanks, @SimulatedGREG! I'm not seeing this error any more, but unfortunately, after pulling down the template again and starting over with a new project folder, I'm just seeing a blank app after running npm run dev.

Not running a proxy, checked some of the other closed issues but didn't find any relevant info. Here's the end of what's shown in the console:

Let me know if I can provide any additional info.

[SimulatedGREG]

I cannot seem to reproduce this issue. I've tried multiple node versions on Windows 10 and have seen the initial landing page on every npm run dev. Would you happen to have a repo link I could take a look at?

[hxlnt]

Just made a fresh repo at https://github.com/hxlnt/clic-electron. Thanks!

[SimulatedGREG]

@hxlnt

Have you tried scaffolding a project on a different system? I'm still unable to reproduce this. I've tried multiple node versions on both Windows and macOS, and they all are producing the landing page on npm run dev.

[hxlnt]

Just tried on my Mac; no problems there.

I tried this again on my PC after reinstalling windows-build-tools, in case something went wrong with that installation. Tried running with/without Admin priv. Walked through all my internet and Chrome settings to make sure no weird proxy stuff. Don't think it matters, but even updated Chrome from version 58.0.3029.110 (64-bit) to 59.0.3071.86 (Official Build) (64-bit). But still no luck.

I have another Windows 10 machine; I'll give it a try there and report back. Thanks! 😃

In the meantime, is there any logging stuff I could turn on or anything else that would help me debug? Is the logging meant to end as shown in the image I posted above?

[SimulatedGREG]

The log is meant to end as shown in your screenshot. Other than internal log flags that may be available from webpack or electron, there isn't anything extra electron-vue provides. You could try opening http://localhost:9080 in a web browser after running npm run dev. The browser should show a blank screen, but if you look at the dev tool logs from the browser you should see an error message about require not being defined. If you see this error, then the problem most likely isn't with webpack.

[hxlnt]

In Chrome, just seeing "Failed to load resource: net::ERR_CONNECTION_RESET." Not the error you mention.

Tried the install on my other Windows 10 machine. Works fine. Same node and npm versions. 😑

The only difference I noticed between the two PCs is that on the one that doesn't work, I saw:

? Setup end-to-end testing with Spectron + Mocha? No
? What build tool would you like to use? builder

   vue-cli · Generated "clicupdate".
warning Failed to append commit SHA on README.md

On the PC where the install worked, I didn't get this message. I was prompted to add my email address and then got a welcome/success message.

(Weirdly, the SHA error did appear on my working Mac install as well.)

I wonder if it's a certificate issue?

Anyway, no worries if you want to abandon this issue... might not be worth all the sleuthing.

[SimulatedGREG]

It seems, for whatever reason, your node installation is being blocked of all network connections. So perhaps a windows firewall issue? Not sure.

[Hyjaz]

@hxlnt Were you able to fix the error you were getting on your mac on vue init?
I am currently getting this same exact error.

I have opened an issue (#543) describing the error.

[xiaomizhou66]

liuxm@me ~/work/electron/wx
λ yarn run dev
yarn run v1.13.0
warning package.json: No license field
$ node .electron-vue/dev-runner.js
         ___                      __
 WARNING in ./node_modules/electron-debug/index.js 81:45-58
  Critical dependency: the request of a dependency is an expression
   @ ./src/main/index.dev.js
   @ multi ./src/main/index.dev.js ./src/main/index.js

  WARNING in ./node_modules/electron-debug/index.js 84:85-106
  Critical dependency: the request of a dependency is an expression
   @ ./src/main/index.dev.js
   @ multi ./src/main/index.dev.js ./src/main/index.js

┗ ----------------------------

┏ Electron -------------------

  Debugger listening on ws://127.0.0.1:5858/1a1a0
┗ ----------------------------

┏ Electron -------------------

  dcc-642a-48ad-a717-96ec528e280e
  For help see https://nodejs.org/en/docs/inspector

┗ ----------------------------

┏ Electron -------------------

  Failed to fetch extension, trying 4 more times

┗ ----------------------------

┏ Electron -------------------

  Failed to fetch extension, trying 3 more times

┗ ----------------------------

┏ Electron -------------------

  Failed to fetch extension, trying 2 more times

┗ ----------------------------

┏ Electron -------------------

  Failed to fetch extension, trying 1 more times

┗ ----------------------------

┏ Electron -------------------

  Failed to fetch extension, trying 0 more times

┗ ----------------------------

┏ Electron -------------------

  Unable to install `vue-devtools`:
   Error: net::ERR_CONNECTION_TIMED_OUT

┗ ----------------------------

[xiaomizhou66]

win

[Chenhw2017]

PS C:\Users\Chenhw\StudyWorkBrench\Electron\my-project> npm run dev

[email protected] dev C:\Users\Chenhw\StudyWorkBrench\Electron\my-project
node .electron-vue/dev-runner.js

     ___                      __

__ /_ \ __ ___ /\ __ _ __ ___ ___ __ __ __ __ __
/ ,.\ \//\ \ / ,.\ /'___\ \ \ ,_\ /` __\ / __\ /' _\ _______ /\ \/\ \/\ \/\ \ / ,.`\
/\ __/ _\ _ /\ __/ /\ __/ \ \ \/ \ \ \/ /\ _\ \/\ \/\ \ /______\ \ \/ |\ \ _\ \/\ __/
\ ____\ /____\ ____\ ____\ \ \ _ \ _\ \ ____/\ _\ _\/______/ \ ___/ \ ____/\ ____\
\/____/ \/____/ \/____/ \/____/ \ __\ \/_/ \/___/ \/_/\/_/ \/__/ \/___/ \/____/
\/__/
getting ready...

┏ Main Process ---------------

compiling...

┗ ----------------------------

┏ Renderer Process -----------

Hash: db283f5350077208d7a7
Version: webpack 4.31.0
Time: 3571ms
Built at: 2019-05-12 15:26:11
Asset Size Chunks Chunk Names
imgs/logo--assets.png 60.4 KiB [emitted]
index.html 440 bytes [emitted]
renderer.js 1.76 MiB renderer [emitted] renderer
Entrypoint renderer = renderer.js
[1] multi (webpack)-dev-server/client?http://localhost ./.electron-vue/dev-client ./src/renderer/main.js 52 bytes {renderer} [built]
[./.electron-vue/dev-client.js] 731 bytes {renderer} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {renderer} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {renderer} [built]
[./node_modules/vue/dist/vue.esm.js] 318 KiB {renderer} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost] (webpack)-dev-server/client?http://localhost 8.26 KiB {renderer} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.59 KiB {renderer} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {renderer} [built]
[./node_modules/webpack-hot-middleware/client.js?noInfo=true&reload=true] (webpack)-hot-middleware/client.js?noInfo=true&reload=true 7.68 KiB {renderer} [built]
[./node_modules/webpack/hot sync ^.\/log$] (webpack)/hot sync nonrecursive ^.\/log$ 170 bytes {renderer} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {renderer} [built]
[./src/renderer/App.vue] 1.13 KiB {renderer} [built]
[./src/renderer/main.js] 382 bytes {renderer} [built]
[./src/renderer/router/index.js] 264 bytes {renderer} [built]
[./src/renderer/store/index.js] 342 bytes {renderer} [built]
+ 54 hidden modules
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 1.38 MiB 0
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./src/index.ejs] 1.15 KiB {0} [built]
[./node_modules/lodash/lodash.js] 527 KiB {0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]

┗ ----------------------------

┏ Main Process ---------------

Hash: 032ed4f586c305c2444e
Version: webpack 4.31.0
Time: 4577ms
Built at: 2019-05-12 15:26:12
Asset Size Chunks Chunk Names
main.js 213 KiB main [emitted] main
Entrypoint main = main.js
[0] multi ./src/main/index.dev.js ./src/main/index.js 40 bytes {main} [built]
[./node_modules/cross-unzip/index.js] 1.49 KiB {main} [built]
[./node_modules/electron-debug sync recursive] ./node_modules/electron-debug sync 160 bytes {main} [built]
[./node_modules/electron-debug/index.js] 2.46 KiB {main} [built]
[./node_modules/electron-devtools-installer/dist/downloadChromeExtension.js] 2.26 KiB {main} [built]
[./node_modules/electron-devtools-installer/dist/index.js] 5.02 KiB {main} [built]
[./node_modules/electron-devtools-installer/dist/utils.js] 1.88 KiB {main} [built]
[./node_modules/electron-is-dev/index.js] 256 bytes {main} [built]
[./node_modules/electron-localshortcut/index.js] 8.16 KiB {main} [built]
[./node_modules/semver/semver.js] 37.9 KiB {main} [built]
[./src/main/index.dev.js] 364 bytes {main} [built]
[./src/main/index.js] 801 bytes {main} [built]
[electron] external "electron" 42 bytes {main} [built]
[fs] external "fs" 42 bytes {main} [built]
[path] external "path" 42 bytes {main} [built]
+ 33 hidden modules

WARNING in ./node_modules/electron-debug/index.js 81:45-58
Critical dependency: the request of a dependency is an expression
@ ./src/main/index.dev.js
@ multi ./src/main/index.dev.js ./src/main/index.js

WARNING in ./node_modules/electron-debug/index.js 84:85-106
Critical dependency: the request of a dependency is an expression
@ ./src/main/index.dev.js
@ multi ./src/main/index.dev.js ./src/main/index.js

┗ ----------------------------

┏ Electron -------------------

Debugger listening on ws://127.0.0.1:5858/90aebc9a-6610-41d9-a70b-32ac27059cac
For help see https://nodejs.org/en/docs/inspector

┗ ----------------------------

┏ Electron -------------------

Failed to fetch extension, trying 4 more times

┗ ----------------------------

┏ Electron -------------------

Failed to fetch extension, trying 3 more times

┗ ----------------------------

┏ Electron -------------------

Failed to fetch extension, trying 2 more times

┗ ----------------------------

┏ Electron -------------------

Failed to fetch extension, trying 1 more times

┗ ----------------------------

┏ Electron -------------------

Failed to fetch extension, trying 0 more times

┗ ----------------------------

┏ Electron -------------------

Unable to install vue-devtools:
Error: net::ERR_CONNECTION_TIMED_OUT

┗ ----------------------------

[Chenhw2017]

I have got the same errors,why? also,i cann't use the vue-devtools

[jesuskinto]

For me the solution was to install Unzip

sudo apt-get install unzip

[hjsg]

I get the same error;
this is my solution:
npm install vue-devtools --save-dev
on main/index.js:
BrowserWindow.addDevToolsExtension('node_modules/vue-devtools/vender')