search

vuejs / vue-cli

🛠️ webpack-based tooling for Vue.js Development
https://cli.vuejs.org/
MIT License
29.76k stars 6.33k forks source link

`Vue add vuetify` breaks webpack serve #6201

Open Tzahile opened 3 years ago

Tzahile commented 3 years ago

Version

5.0.0-alpha.2

Reproduction link

https://github.com/Tzahile/vueCLI5-vuetify

Environment info

System:
    OS: Windows Server 2016 10.0.14393
    CPU: (4) x64 Intel(R) Core(TM) i7-6500U CPU @ 2.50GHz
  Binaries:
    Node: 15.5.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.10 - ~\AppData\Roaming\npm\npm.CMD
  Browsers:
    Chrome: 87.0.4280.141
    Edge: Not Found
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1
    @vue/babel-helper-vue-transform-on:  1.0.0
    @vue/babel-plugin-jsx:  1.0.1
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  5.0.0-alpha.2
    @vue/babel-preset-jsx:  1.2.4
    @vue/babel-sugar-composition-api-inject-h:  1.2.1
    @vue/babel-sugar-composition-api-render-instance:  1.2.4
    @vue/babel-sugar-functional-vue:  1.2.2
    @vue/babel-sugar-inject-h:  1.2.2
    @vue/babel-sugar-v-model:  1.2.3
    @vue/babel-sugar-v-on:  1.2.3
    @vue/cli-overlay:  5.0.0-alpha.2
    @vue/cli-plugin-babel: ~5.0.0-alpha.2 => 5.0.0-alpha.2
    @vue/cli-plugin-e2e-cypress: ~5.0.0-alpha.2 => 5.0.0-alpha.2
    @vue/cli-plugin-eslint: ~5.0.0-alpha.2 => 5.0.0-alpha.2
    @vue/cli-plugin-router: ~5.0.0-alpha.2 => 5.0.0-alpha.2
    @vue/cli-plugin-unit-jest: ~5.0.0-alpha.2 => 5.0.0-alpha.2
    @vue/cli-plugin-vuex: ~5.0.0-alpha.2 => 5.0.0-alpha.2
    @vue/cli-service: ~5.0.0-alpha.2 => 5.0.0-alpha.2
    @vue/cli-shared-utils:  5.0.0-alpha.2
    @vue/component-compiler-utils:  3.2.0
    @vue/eslint-config-prettier: ^6.0.0 => 6.0.0
    @vue/preload-webpack-plugin:  1.1.2
    @vue/test-utils: ^1.0.3 => 1.1.2
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^7.2.0 => 7.4.1
    jest-serializer-vue:  2.0.2
    vue: ^2.6.11 => 2.6.12
    vue-cli-plugin-vuetify: ~2.0.9 => 2.0.9
    vue-eslint-parser:  7.3.0
    vue-hot-reload-api:  2.3.4
    vue-jest:  3.0.7
    vue-loader:  16.1.2 (15.9.6)
    vue-router: ^3.4.3 => 3.4.9
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.11 => 2.6.12
    vue-template-es2015-compiler:  1.9.1
    vuetify: ^2.2.11 => 2.4.2
    vuetify-loader: ^1.3.0 => 1.6.0
    vuex: ^3.6.0 => 3.6.0
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

From scratch (otherwise, if working from repo attached above, just $npm run serve): $ vue create new-project - Set some environment you like. When finished: $ cd vueCLI5-vuetify && npm install && npm run serve - So far, so good. $ vue add vuetify - Choose the recommended setup.

$ npm run serve - now won't work

What is expected?

Webpack should run normally

What is actually happening?

ERROR Error: Cannot find module 'webpack/lib/RuleSet'

Full PS logs

PS C:\Projects\vueCLI5-vuetify> vue add vuetify 📦 Installing vue-cli-plugin-vuetify...

  • vue-cli-plugin-vuetify@2.0.9 added 7 packages from 9 contributors and audited 1990 packages in 25.619s

109 packages are looking for funding run npm fund for details

found 0 vulnerabilities

✔ Successfully installed plugin: vue-cli-plugin-vuetify

? Choose a preset: Default (recommended)

🚀 Invoking generator for vue-cli-plugin-vuetify... 📦 Installing additional dependencies...

added 3 packages from 2 contributors and audited 1993 packages in 24.954s

110 packages are looking for funding run npm fund for details

found 0 vulnerabilities

⚓ Running completion hooks...

✔ Successfully invoked generator for plugin: vue-cli-plugin-vuetify vuetify Discord community: https://community.vuetifyjs.com vuetify Github: https://github.com/vuetifyjs/vuetify vuetify Support Vuetify: https://github.com/sponsors/johnleider

PS C:\Projects\vueCLI5-vuetify> npm run serve

vueCLI5-vuetify@0.1.0 serve C:\Projects\vueCLI5-vuetify vue-cli-service serve

ERROR Error: Cannot find module 'webpack/lib/RuleSet' Require stack:

  • C:\Projects\vueCLI5-vuetify\node_modules\vuetify-loader\lib\plugin.js
  • C:\Projects\vueCLI5-vuetify\node_modules\vue-cli-plugin-vuetify\index.js
  • C:\Projects\vueCLI5-vuetify\node_modules\@vue\cli-service\lib\Service.js
  • C:\Projects\vueCLI5-vuetify\node_modules\@vue\cli-service\bin\vue-cli-service.js Error: Cannot find module 'webpack/lib/RuleSet' Require stack:
  • C:\Projects\vueCLI5-vuetify\node_modules\vuetify-loader\lib\plugin.js
  • C:\Projects\vueCLI5-vuetify\node_modules\vue-cli-plugin-vuetify\index.js
  • C:\Projects\vueCLI5-vuetify\node_modules\@vue\cli-service\lib\Service.js
  • C:\Projects\vueCLI5-vuetify\node_modules\@vue\cli-service\bin\vue-cli-service.js at Function.Module._resolveFilename (node:internal/modules/cjs/loader:925:15) at Function.Module._resolveFilename (C:\Projects\vueCLI5-vuetify\node_modules\module-alias\index.js:49:29) at Function.Module._load (node:internal/modules/cjs/loader:769:27) at Module.require (node:internal/modules/cjs/loader:997:19) at require (node:internal/modules/cjs/helpers:92:18) at Object. (C:\Projects\vueCLI5-vuetify\node_modules\vuetify-loader\lib\plugin.js:1:17) at Module._compile (node:internal/modules/cjs/loader:1108:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10) at Module.load (node:internal/modules/cjs/loader:973:32) at Function.Module._load (node:internal/modules/cjs/loader:813:14) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! vueCLI5-vuetify@0.1.0 serve: vue-cli-service serve npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the vueCLI5-vuetify@0.1.0 serve script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\tc02993\AppData\Roaming\npm-cache_logs\2021-01-11T15_19_04_977Z-debug.log

sodatea commented 3 years ago

vuetify-loader hasn't supported webpack 5 yet https://github.com/vuetifyjs/vuetify-loader/issues/136. In this case, please run vue add webpack-4.

Tzahile commented 3 years ago

I upgraded mainly for Webpack v.5 😅 If it depends on vuetify-loader, maybe I should move the issue there? After all, at some point they need to support it.

sodatea commented 3 years ago

Yeah there are two ongoing PRs already: https://github.com/vuetifyjs/vuetify-loader/pull/166 https://github.com/vuetifyjs/vuetify-loader/pull/165

Peque commented 2 years ago

@Tzahile You can now install vuetify-loader@^1.7.3 to fix the issue. :blush: