vuejs / devtools-v6

⚙️ Browser devtools extension for debugging Vue.js applications.
https://devtools-v6.vuejs.org/
MIT License
24.68k stars 4.15k forks source link

Mixed build messes up Webpack #1886

Open beruic opened 2 years ago

beruic commented 2 years ago

Version

6.1.4

Browser and OS info

Chrome 102, Ubuntu 20.04

Steps to reproduce

  1. Clone the repo at https://github.com/beruic/quasar-devtools-bug
  2. Run npm ci for dependencies
  3. Run quasar dev to run development server

What is expected?

Project runs

What is actually happening?

It errors with

 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.

See https://github.com/quasarframework/quasar/issues/13535 for further details. Especially this comment seems to pinpoint the issue.

veitbjarsch commented 2 years ago

Same here for the latest version.

lightoyou commented 1 year ago

Hi guys I have the same issue.. Anyone have an idea about how we can solve this issue ?

veitbjarsch commented 1 year ago

I pinned the devtools to the latest working version and switched now to vite, which is working fine. Couldn't find any other workaround that fix this problem temporarily.

Teo27 commented 1 year ago

I am currently sticking with version 6.1.0 which seems to be the last version that is working

kuanyui commented 1 year ago

I am currently sticking with version 6.1.0 which seems to be the last version that is working

Encountered the same issue with latest vuejs devtools 6.5.0, and and confirm that 6.1.0 is workable. (Environment: Node 14.20.0, Arch-based Linux)

rstoenescu commented 1 year ago

For anyone reading this and using the Quasar CLI in its Webpack form, I've pushed a workaround and will be available in @quasar/app-webpack v3.9.3

coolman90011 commented 1 year ago

@rstoenescu I use @quasar/app-webpack v3.9.3, but vuedevtools always show waiting for connection... image

My package app/wabpack version as below...

image

but quasar info show app/webpack version not equal...

This is my quasar info: Operating System - Windows_NT(10.0.19045) - win32/x64 NodeJs - 16.15.0

Global packages NPM - 8.5.5 yarn - 1.22.19 @quasar/cli - 2.2.2 @quasar/icongenie - Not installed cordova - Not installed

Important local packages quasar - 2.12.4 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time @quasar/app-webpack - 3.9.3 -- Quasar Framework App CLI with Webpack @quasar/extras - 1.16.5 -- Quasar Framework fonts, icons and animations eslint-plugin-quasar - Not installed vue - 3.3.4 -- The progressive JavaScript framework for building modern web UI. vue-router - 4.2.4 pinia - 2.1.6 -- Intuitive, type safe and flexible Store for Vue vuex - Not installed electron - 26.0.0 -- Build cross platform desktop apps with JavaScript, HTML, and CSS electron-packager - Not installed electron-builder - Not installed @babel/core - 7.22.10 -- Babel compiler core. webpack - 5.88.2 -- Packs ECMAScript/CommonJs/AMD modules for the browser. Allows you to split your codebase into multiple bundles, which can be loaded on demand. Supports loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff. webpack-dev-server - 4.11.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.9.4 -- 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