Vue Devtools giving trouble

What happened?

When i run quasar dev I get a lot of errors that dependencies are missing. It ends off with “No issues found.”, but nothing runs.

What did you expect to happen?

I expected it to just work.

Reproduction URL

https://github.com/beruic/quasar-devtools-bug

How to reproduce?

1. Clone the linked repo
2. Run npm ci for dependencies
3. Run quasar dev

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite), TypeScript Support

Platforms/Browsers

Chrome

Quasar info output

Operating System - Linux(5.13.0-44-generic) - linux/x64
NodeJs - 16.15.0

Global packages
  NPM - 8.10.0
  yarn - 1.22.15
  @quasar/cli - 1.3.2
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.7.1 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.5.3 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.14.0 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.36 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.0.15
  pinia - 2.0.14 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  electron - 12.2.3 -- Build cross platform desktop apps with JavaScript, HTML, and CSS
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.18.2 -- Babel compiler core.
  webpack - 5.72.1 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.8.1 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.5.5 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - jmk-dev
  enp0s31f6 - 192.168.1.127
  wlp1s0 - 192.168.1.234
  docker0 - 172.17.0.1

Relevant log output

.d88888b.
d88P" "Y88b
888     888
888     888 888  888  8888b.  .d8888b   8888b.  888d888
888     888 888  888     "88b 88K          "88b 888P"
888 Y8b 888 888  888 .d888888 "Y8888b. .d888888 888
Y88b.Y8b88P Y88b 888 888  888      X88 888  888 888
 "Y888888"   "Y88888 "Y888888  88888P' "Y888888 888
       Y8b


 Dev mode.................. spa
 Pkg quasar................ v2.7.1
 Pkg @quasar/app-webpack... v3.5.3
 Pkg webpack............... v5
 Debugging................. enabled

 Configured browser support (>= 87.54% of global marketshare):
 · Chrome for Android >= 101
 · Firefox for Android >= 100
 · Android >= 101
 · Chrome >= 92
 · Edge >= 98
 · Firefox >= 91
 · iOS >= 12.2-12.5
 · Opera >= 82
 · Safari >= 13.1

 App •  WAIT  • Compiling of "UI" in progress...
 App •  DONE  • "UI" compiled with errors • 7706ms



 App •  ERROR  •  UI  in ./node_modules/@vue/devtools/build-node/backend.js

Module not found: Can't resolve imported dependency "child_process"
Did you forget to install it? You can run: npm install --save child_process

 App •  ERROR  •  UI  in ./node_modules/@vue/devtools/build-node/backend.js

Module not found: Can't resolve imported dependency "crypto"
Did you forget to install it? You can run: npm install --save crypto

 App •  ERROR  •  UI  in ./node_modules/@vue/devtools/build-node/backend.js

Module not found: Can't resolve imported dependency "fs"
Did you forget to install it? You can run: npm install --save fs

 App •  ERROR  •  UI  in ./node_modules/@vue/devtools/build-node/backend.js

Module not found: Can't resolve imported dependency "http"
Did you forget to install it? You can run: npm install --save http

 App •  ERROR  •  UI  in ./node_modules/@vue/devtools/build-node/backend.js

Module not found: Can't resolve imported dependency "https"
Did you forget to install it? You can run: npm install --save https

 App •  ERROR  •  UI  in ./node_modules/@vue/devtools/build-node/backend.js

Module not found: Can't resolve imported dependency "net"
Did you forget to install it? You can run: npm install --save net

 App •  ERROR  •  UI  in ./node_modules/@vue/devtools/build-node/backend.js

Module not found: Can't resolve imported dependency "os"
Did you forget to install it? You can run: npm install --save os

 App •  ERROR  •  UI  in ./node_modules/@vue/devtools/build-node/backend.js

Module not found: Can't resolve imported dependency "path"
Did you forget to install it? You can run: npm install --save path

 App •  ERROR  •  UI  in ./node_modules/@vue/devtools/build-node/backend.js

Module not found: Can't resolve imported dependency "stream"
Did you forget to install it? You can run: npm install --save stream

 App •  ERROR  •  UI  in ./node_modules/@vue/devtools/build-node/backend.js

Module not found: Can't resolve imported dependency "tls"
Did you forget to install it? You can run: npm install --save tls

 App •  ERROR  •  UI  in ./node_modules/@vue/devtools/build-node/backend.js

Module not found: Can't resolve imported dependency "tty"
Did you forget to install it? You can run: npm install --save tty

 App •  ERROR  •  UI  in ./node_modules/@vue/devtools/build-node/backend.js

Module not found: Can't resolve imported dependency "url"
Did you forget to install it? You can run: npm install --save url

 App •  ERROR  •  UI  in ./node_modules/@vue/devtools/build-node/backend.js

Module not found: Can't resolve imported dependency "util"
Did you forget to install it? You can run: npm install --save util

 App •  ERROR  •  UI  in ./node_modules/@vue/devtools/build-node/backend.js

Module not found: Can't resolve imported dependency "zlib"
Did you forget to install it? You can run: npm install --save zlib


 App •  COMPILATION FAILED  • Please check the log above for details.

No issues found.

Additional context

I have only added the below to src/pages/IndexPage.vue. Otherwise it is a pretty vanilla new project.

import devtools from '@vue/devtools';

devtools.connect()

If the above lines are removed, it can also be reproduced by running quasar dev --devtools.

[yusufkandemir]

Quasar offers two ways for using remote Vue Devtools:

1. https://quasar.dev/quasar-cli-webpack/quasar-config-js#property-devserver

devServer: {
  vueDevtools: true
}

1. https://quasar.dev/quasar-cli-webpack/commands-list#dev quasar dev --devtools

[rstoenescu]

Someone pls report this issue to vue devtools team. Thank you