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

stefanlivens · 2021-10-28T13:53:50Z

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.

The text was updated successfully, but these errors were encountered:

ph3ne · 2021-12-01T15:00:24Z

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...

marquelamar · 2021-12-02T11:22:08Z

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 · 2021-12-23T09:37:31Z

+1

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

rafal-sokolowski · 2021-12-30T11:01:04Z

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 · 2022-01-03T14:21:01Z

Very simplistic solution: #6904

trent-abc · 2022-06-29T20:31:07Z

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 · 2022-06-30T13:44:26Z

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...

This commit fixes two issues: a. Fix `npm install` not working b. Fix building not working after npm install fix. npm install fails with dependency resolution issue due to Vue CLI as following: ```txt npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: cache-loader@4.1.0 ... ```txt As suggested in Vue issues regenerating packages-lock.json solves the issue, see: vuejs/vue-cli#6793, vuejs/vue-cli#7095. However with the new package-lock.json a Font Awesome dependency issue breaks the builds such as the following: ```txt ERROR in src/presentation/bootstrapping/Modules/IconBootstrapper.ts:17:7 TS2345: Argument of type 'IconDefinition' is not assignable to parameter of type 'IconDefinitionOrPack'. Type 'IconDefinition' is not assignable to type 'IconPack'. Index signature for type 'string' is missing in type 'IconDefinition'. 15 | public bootstrap(vue: VueConstructor): void { 16 | library.add( > 17 | faGithub, ``` This is solved by adding a patch in `tsconfig.json`. This issue was discussed in FortAwesome/Font-Awesome#12575 where the workaround was recommended.

ph3ne mentioned this issue Dec 2, 2021

Cannot find @vue/cli-plugin-babel@^3.1.1 #2879

Closed

Icacls mentioned this issue Dec 13, 2021

vue2项目jsx代码编译报错 empjs/emp#250

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

stefanlivens commented Oct 28, 2021

ph3ne commented Dec 1, 2021 •

edited

Loading

marquelamar commented Dec 2, 2021

agileago commented Dec 23, 2021 •

edited

Loading

rafal-sokolowski commented Dec 30, 2021

stefanlivens commented Jan 3, 2022

trent-abc commented Jun 29, 2022

stefanlivens commented Jun 30, 2022

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

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

Comments

stefanlivens commented Oct 28, 2021

Version

Environment info

Steps to reproduce

What is expected?

What is actually happening?

ph3ne commented Dec 1, 2021 • edited Loading

marquelamar commented Dec 2, 2021

agileago commented Dec 23, 2021 • edited Loading

rafal-sokolowski commented Dec 30, 2021

stefanlivens commented Jan 3, 2022

trent-abc commented Jun 29, 2022

stefanlivens commented Jun 30, 2022

ph3ne commented Dec 1, 2021 •

edited

Loading

agileago commented Dec 23, 2021 •

edited

Loading