@vue/cli-service@5.0.0-beta.7 uses cache-loader which depends on webpack@4

[stefanlivens]

Version

5.0.0-beta.7

Environment info

Environment Info:

  System:
    OS: macOS 11.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 14.17.0 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.14.13 - /usr/local/bin/npm
  Browsers:
    Chrome: 95.0.4638.54
    Edge: 95.0.1020.30
    Firefox: 93.0
    Safari: 15.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1 
    @vue/babel-helper-vue-transform-on:  1.0.2 
    @vue/babel-plugin-jsx:  1.1.1 
    @vue/babel-plugin-transform-vue-jsx:  1.2.1 
    @vue/babel-preset-app:  5.0.0-beta.7 
    @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-beta.7 
    @vue/cli-plugin-babel: ^5.0.0-beta.7 => 5.0.0-beta.7 
    @vue/cli-plugin-eslint: ^5.0.0-beta.7 => 5.0.0-beta.7 
    @vue/cli-plugin-router: ^5.0.0-beta.7 => 5.0.0-beta.7 
    @vue/cli-plugin-unit-jest: ^5.0.0-beta.7 => 5.0.0-beta.7 
    @vue/cli-plugin-vuex: ^5.0.0-beta.7 => 5.0.0-beta.7 
    @vue/cli-service: ^5.0.0-beta.7 => 5.0.0-beta.7 
    @vue/cli-shared-utils:  5.0.0-beta.7 
    @vue/component-compiler-utils:  3.3.0 
    @vue/eslint-config-airbnb: ^5.3.0 => 5.3.0 
    @vue/test-utils: ^1.2.2 => 1.2.2 (2.0.0-rc.16)
    @vue/vue2-jest: ^27.0.0-alpha.3 => 27.0.0-alpha.3 
    @vue/web-component-wrapper:  1.3.0 
    eslint-plugin-vue: ^7.6.0 => 7.20.0 
    jest-serializer-vue:  2.0.2 
    typescript:  3.9.10 
    vue: ^2.6.11 => 2.6.14 (2.6.12)
    vue-cli-plugin-i18n: ^2.3.1 => 2.3.1 
    vue-eslint-parser:  7.11.0 
    vue-hot-reload-api:  2.3.4 
    vue-i18n: ^8.17.3 => 8.26.5 (8.22.2)
    vue-i18n-extract:  1.0.2 
    vue-loader:  16.8.2 (15.9.8)
    vue-meta: ^2.4.0 => 2.4.0 
    vue-router: ^3.2.0 => 3.5.3 
    vue-style-loader:  4.1.3 
    vue-template-compiler: ^2.6.11 => 2.6.14 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^3.4.0 => 3.6.2 
    vuex-persist:  3.1.3 
  npmGlobalPackages:
    @vue/cli: 4.5.13

Steps to reproduce

npm ls cache-loader
gives:

└─┬ @vue/cli-service@5.0.0-beta.7
  └── cache-loader@4.1.0  

npm ls webpack
gives:

├─┬ @vue/cli-plugin-babel@5.0.0-beta.7
│ └── UNMET PEER DEPENDENCY webpack@5.60.0 
├─┬ @vue/cli-plugin-eslint@5.0.0-beta.7
│ └── UNMET PEER DEPENDENCY webpack@5.60.0  deduped
└─┬ @vue/cli-service@5.0.0-beta.7
  ├─┬ @types/webpack-dev-server@4.3.1
  │ ├─┬ @types/webpack-dev-middleware@5.0.2
  │ │ └── UNMET PEER DEPENDENCY webpack@5.60.0  deduped
  │ └── UNMET PEER DEPENDENCY webpack@5.60.0  deduped
  └── UNMET PEER DEPENDENCY webpack@5.60.0  deduped

npm ERR! peer dep missing: webpack@^4.0.0, required by cache-loader@4.1.0

What is expected?

No need for cache-loader anymore, because this only works for webpack@4, and cli-service et al. is on webpack@5

What is actually happening?

cache-loader is installed

---

It is not really a problem, I mean everything still works (unit-tests, serve, build,...) but npm 7 and up will become more strict with peerDependencies, so this might become a real issue in the future.

[ph3ne]

Hi, I have the same issue but worse as I can't run my project anymore with NPM 8.1.3: it uninstalls my @vue/cli-service@5.0.0-rc.1 as soon as I manually add a npm package (with npm install ) after creating a Vue project and give the following error:

sh: 1: vue-cli-service: not found

If I try to reinstall the cli-service, it gives the following error during its installation:

npm WARN While resolving: cache-loader@4.1.0
npm WARN Found: webpack@5.64.4
npm WARN node_modules/@vue/cli-service/node_modules/webpack
npm WARN   webpack@"^5.54.0" from @vue/cli-service@5.0.0-rc.1
npm WARN   node_modules/@vue/cli-service
npm WARN     @vue/cli-service@"5.0.0-rc.1" from the root project
npm WARN     2 more (@vue/cli-plugin-router, @vue/cli-plugin-vuex)
npm WARN   15 more (@soda/friendly-errors-webpack-plugin, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer webpack@"^4.0.0" from cache-loader@4.1.0
npm WARN node_modules/@vue/cli-service/node_modules/cache-loader
npm WARN   cache-loader@"^4.1.0" from @vue/cli-service@5.0.0-rc.1
npm WARN   node_modules/@vue/cli-service
npm WARN
npm WARN Conflicting peer dependency: webpack@4.46.0
npm WARN node_modules/webpack
npm WARN   peer webpack@"^4.0.0" from cache-loader@4.1.0
npm WARN   node_modules/@vue/cli-service/node_modules/cache-loader
npm WARN     cache-loader@"^4.1.0" from @vue/cli-service@5.0.0-rc.1
npm WARN     node_modules/@vue/cli-service
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.

Then the following error if I try to lint, serve or build once reinstalled:

  throw err;
  ^

Error: Cannot find module '@vue/cli-plugin-babel'
Require stack:
- /home/lpierru/n/lib/node_modules/@vue/cli-service/lib/Service.js
- /home/lpierru/n/lib/node_modules/@vue/cli-service/bin/vue-cli-service.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at idToPlugin (/home/lpierru/n/lib/node_modules/@vue/cli-service/lib/Service.js:156:14)
    at /home/lpierru/n/lib/node_modules/@vue/cli-service/lib/Service.js:195:20
    at Array.map (<anonymous>)
    at Service.resolvePlugins (/home/lpierru/n/lib/node_modules/@vue/cli-service/lib/Service.js:182:10)
    at new Service (/home/lpierru/n/lib/node_modules/@vue/cli-service/lib/Service.js:35:25)
    at Object.<anonymous> (/home/lpierru/n/lib/node_modules/@vue/cli-service/bin/vue-cli-service.js:15:17) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/lpierru/n/lib/node_modules/@vue/cli-service/lib/Service.js',
    '/home/lpierru/n/lib/node_modules/@vue/cli-service/bin/vue-cli-service.js'
  ]

I was forced to downgrade to npm 6 to make it work, and lost several days troubleshooting before I found this issue...

[theQgotdrip]

Hi, I have the same issue but worse as I can't run my project anymore with NPM 8.1.3: it uninstalls my @vue/cli-service@5.0.0-rc.1 as soon as I manually add a npm package (with npm install ) after creating a Vue project and give the following error:

sh: 1: vue-cli-service: not found

If I try to reinstall the cli-service, it gives the following error during its installation:

npm WARN While resolving: cache-loader@4.1.0
npm WARN Found: webpack@5.64.4
npm WARN node_modules/@vue/cli-service/node_modules/webpack
npm WARN   webpack@"^5.54.0" from @vue/cli-service@5.0.0-rc.1
npm WARN   node_modules/@vue/cli-service
npm WARN     @vue/cli-service@"5.0.0-rc.1" from the root project
npm WARN     2 more (@vue/cli-plugin-router, @vue/cli-plugin-vuex)
npm WARN   15 more (@soda/friendly-errors-webpack-plugin, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer webpack@"^4.0.0" from cache-loader@4.1.0
npm WARN node_modules/@vue/cli-service/node_modules/cache-loader
npm WARN   cache-loader@"^4.1.0" from @vue/cli-service@5.0.0-rc.1
npm WARN   node_modules/@vue/cli-service
npm WARN
npm WARN Conflicting peer dependency: webpack@4.46.0
npm WARN node_modules/webpack
npm WARN   peer webpack@"^4.0.0" from cache-loader@4.1.0
npm WARN   node_modules/@vue/cli-service/node_modules/cache-loader
npm WARN     cache-loader@"^4.1.0" from @vue/cli-service@5.0.0-rc.1
npm WARN     node_modules/@vue/cli-service
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.

Then the following error if I try to lint, serve or build once reinstalled:

  throw err;
  ^

Error: Cannot find module '@vue/cli-plugin-babel'
Require stack:
- /home/lpierru/n/lib/node_modules/@vue/cli-service/lib/Service.js
- /home/lpierru/n/lib/node_modules/@vue/cli-service/bin/vue-cli-service.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at idToPlugin (/home/lpierru/n/lib/node_modules/@vue/cli-service/lib/Service.js:156:14)
    at /home/lpierru/n/lib/node_modules/@vue/cli-service/lib/Service.js:195:20
    at Array.map (<anonymous>)
    at Service.resolvePlugins (/home/lpierru/n/lib/node_modules/@vue/cli-service/lib/Service.js:182:10)
    at new Service (/home/lpierru/n/lib/node_modules/@vue/cli-service/lib/Service.js:35:25)
    at Object.<anonymous> (/home/lpierru/n/lib/node_modules/@vue/cli-service/bin/vue-cli-service.js:15:17) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/lpierru/n/lib/node_modules/@vue/cli-service/lib/Service.js',
    '/home/lpierru/n/lib/node_modules/@vue/cli-service/bin/vue-cli-service.js'
  ]

I was forced to downgrade to npm 6 to make it work, and lost several days troubleshooting before I found this issue...

Thanks for reaching out bro. I did as you said and downgraded to NPM 6. Then i opened up a new instance of iTerm that was set to open in Rosetta Stone (I have an M1 Mac). Then i reinstalled mongod db community 5.0 and rebooted. Then i used the rosetta stone terminal i created to run the mongodb server and it worked.

[agileago]

+1

it seems webpack5 deprecate cache-loader but vue-cli5 also use

[rafal-sokolowski]

The deprecated cache-loader package makes updates impossible.

@sodatea Could you help to remove that dependency and use @vue/cli-service webpack cache instead?

[stefanlivens]

Very simplistic solution: #6904

[trent-abc]

Any chance to revive this issue/pull request? Seems to me to have "become a real issue". I'd prefer not to downgrade to npm 6...

[stefanlivens]

As mentioned in this ticket (#7095) it (cache-loader) is no longer installed. You might need to remove your lock file and node_modules, and do a new npm install...