Vue Devtools giving trouble

[beruic]

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.

[beruic]

I should mention that this happens only when @vue/devtools is above version 6.1.0, so it might be their issue, and it might be an issue with how quasar handles the import.

[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
}

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

[AlphaJuliettOmega]

@yusufkandemir but why did you close this ticket?

I just added -dev to my build command to try debug something

    "dev": "quasar dev -m ssr -dev",
    "build:ssr": "quasar build -m ssr -dev",

and got this error:

 App •  DONE  • "Server-side" compiled with success • 11219ms
No issues found.
 App •  DONE  • "Client-side" compiled with errors • 10537ms



 App •  ERROR  •  Client-side  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: yarn add child_process

 App •  ERROR  •  Client-side  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: yarn add crypto

 App •  ERROR  •  Client-side  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: yarn add fs

 App •  ERROR  •  Client-side  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: yarn add http

 App •  ERROR  •  Client-side  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: yarn add https

 App •  ERROR  •  Client-side  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: yarn add net

 App •  ERROR  •  Client-side  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: yarn add os

 App •  ERROR  •  Client-side  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: yarn add path

 App •  ERROR  •  Client-side  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: yarn add stream

 App •  ERROR  •  Client-side  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: yarn add tls

 App •  ERROR  •  Client-side  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: yarn add tty

 App •  ERROR  •  Client-side  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: yarn add url

 App •  ERROR  •  Client-side  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: yarn add util

 App •  ERROR  •  Client-side  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: yarn add zlib


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

[beruic]

Quasar offers two ways for using remote Vue Devtools:

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

devServer: {
  vueDevtools: true
}

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

@yusufkandemir I get same error from both these two options with @vue/devtools being above 6.1.1

[yusufkandemir]

It wasn't very clear at first because it seemed like you were trying to tailor some kind of custom solution, which is not supported. I have tried the official ways, it works fine with app-vite, but doesn't work with app-webpack as you mentioned. Normally, @vue/devtools has their browser and node builds mixed, controlled by a flag that checks if window is defined. But, even though @vue/devtools is imported in the browser app, webpack throws these errors, so I guess there is a problem with either Webpack or @vue/devtools. But, it needs investigation to find a proper solution.

[yusufkandemir]

https://github.com/vuejs/devtools/releases/tag/v6.1.1 (specifically https://github.com/vuejs/devtools/pull/1780) introduced the mixed build for Node environments. But, it seems it messed up the Webpack build for browser environments. As it uses a simple if-else check for window, Webpack can't analyze the bundle properly.

Using https://github.com/vuejs/devtools/releases/tag/v6.1.0 works fine. This is not a Quasar problem on its own, but as a solution, we can pin the @vue/devtools to v6.1.0, which is the latest version that works properly.

[rstoenescu]

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

[freddy38510]

Just found an other solution working with @vue/devtools > v6.1.0

// quasar.config.js
build: {
  extendWebpack (cfg, { isClient }) {
    if (!isClient) { return; }

    cfg.externals([({ request }, callback) => {
      if (/\.\/build-node\/(hook|backend)\.js/.test(request)) {
        return callback(null, `commonjs ${request}`);
      }

      return callback();
    }]);
  }
}

It tells webpack to externalize the @vue/devtools modules compiled for nodeJS which depends on builtin node modules.

See here and here.