electron-vue
electron-vue copied to clipboard
Published
20 hours ago •
SimulatedGREG
SimulatedGREG
npm run dev or yarn run dev error : Unable to install `vue-devtools`:
trafficstars
λ yarn run dev
yarn run v1.13.0
warning package.json: No license field
$ node .electron-vue/dev-runner.js
___ __
__ /\_ \ __ ___ /\ \__ _ __ ___ ___ __ __ __ __ __
/ ,.`\ \//\ \ / ,.`\ /'___\ \ \ ,_\ /\` __\ / __`\ /' _ `\ _______ /\ \/\ \/\ \/\ \ / ,.`\
/\ __/ \_\ \_ /\ __/ /\ \__/ \ \ \/ \ \ \/ /\ \_\ \/\ \/\ \ /\______\\ \ \/ |\ \ \_\ \/\ __/
\ \____\ /\____\\ \____\\ \____\ \ \ \_ \ \_\ \ \____/\ \_\ \_\\/______/ \ \___/ \ \____/\ \____\
\/____/ \/____/ \/____/ \/____/ \ \__\ \/_/ \/___/ \/_/\/_/ \/__/ \/___/ \/____/
\/__/
getting ready...
┏ Main Process ---------------
compiling...
┗ ----------------------------
┏ Renderer Process -----------
Hash: 859389147a286429ea3b
Version: webpack 4.30.0
Time: 2438ms
Built at: 2019-04-23 12:28:47
Asset Size Chunks Chunk Names
imgs/logo--assets.png 60.4 KiB [emitted]
index.html 412 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.59 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.11 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.14 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: 2dfa5f258360a3c5c5ee
Version: webpack 4.30.0
Time: 3232ms
Built at: 2019-04-23 12:28:47
Asset Size Chunks Chunk Names
main.js 166 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/7zip/index.js] 274 bytes {main} [built]
[./node_modules/cross-unzip/index.js] 1.49 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/rimraf/rimraf.js] 8.78 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] 786 bytes {main} [built]
[electron] external "electron" 42 bytes {main} [built]
[electron-debug] external "electron-debug" 42 bytes {main} [built]
[fs] external "fs" 42 bytes {main} [built]
[https] external "https" 42 bytes {main} [built]
[path] external "path" 42 bytes {main} [built]
+ 20 hidden modules
┗ ----------------------------
┏ Electron -------------------
Debugger listening on
┗ ----------------------------
┏ Electron -------------------
ws://127.0.0.1:5858/17a71390-5777-4c65-8355-fbe9e41f4ab7
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
┗ ----------------------------
The fix is very simple yet hard to find without understanding of how electron works. So here's the simple fix.
Just install vue-devtools as devDependency
npm i vue-devtools --save-dev or yarn add vue-devtools --dev
then edit the src/main/index.dev.js
const BrowserWindow = electron.BrowserWindow;
// Install `electron-debug` with `devtron`
require("electron-debug")({ showDevTools: true });
// Add `vue-devtools`
require("electron").app.on("ready", async () => {
// installExtension(VUEJS_DEVTOOLS)
// .then(() => {})
// .catch((err) => {
// console.log("Unable to install `vue-devtools`: \n", err);
// });
await new BrowserWindow.addDevToolsExtension(
"node_modules/vue-devtools/vender"
);
});
// Require `main` process to boot app
require("./index");```
You can now use Vue-Devtools on Electron Window
From following @primo19 suggestions:
- Install devtools manually:
npm i -D vue-devtools - Edit the
index.dev.jsfile to support the installed module:
# src/main/index.dev.ts
/**
* This file is used specifically and only for development. It installs
* `electron-debug` & `vue-devtools`. There shouldn't be any need to
* modify this file, but it can be used to extend your development
* environment.
*/
/* eslint-disable */
const BrowserWindow = require('electron').BrowserWindow;
// Install `electron-debug` with `devtron`
require('electron-debug')({ showDevTools: true })
// Install `vue-devtools`
require('electron').app.on('ready', async () => {
// let installExtension = require('electron-devtools-installer')
// installExtension.default(installExtension.VUEJS_DEVTOOLS)
// .then(() => {})
// .catch(err => {
// console.log('Unable to install `vue-devtools`: \n', err)
// })
await new BrowserWindow.addDevToolsExtension(
"node_modules/vue-devtools/vender"
);
})
// Require `main` process to boot app
require('./index')
I'm running on Mac as well and was able to get the dev tools plugin working with the above file.
@crwgregory - this throws me the following new errors:
┏ Electron -------------------
(node:40039) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): TypeError: BrowserWindow.addDevToolsExtensions is not a constructor
┗ ----------------------------
┏ Electron -------------------
(node:40039) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
┗ ----------------------------
@cdbrkfxrpt You're probably running a newer version of electron that doesn't support the BrowserWindow https://stackoverflow.com/q/61894248/6214730
You'll probably have to downgrade or figure out how to migrate your code.
this is my config, if could help someone, electron 12
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
app.on('ready', async () => {
if (process.env.NODE_ENV !== 'production') {
try {
const vueDT = await installExtension(VUEJS_DEVTOOLS)
} catch (e) {
console.error('Vue Devtools failed to install:', e.toString())
}
// debugger
}......
