npm ERR while resolving cache-loader@4.1.0

Version

5.0.4

Reproduction link

github.com

Environment info

System:
    OS: Windows 10 10.0.19043
    CPU: (6) x64 Intel(R) Core(TM) i5-9500 CPU @ 3.00GHz
  Binaries:
    Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.6.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (100.0.1185.29)
  npmPackages:
    @ant-design-vue/babel-helper-vue-transform-on:  undefined (1.0.1)
    @fortawesome/vue-fontawesome: ^3.0.0-5 => 3.0.0-5
    @intlify/vue-devtools:  9.1.9
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1 (1.0.0)
    @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 (1.1.2)
    @vue/babel-preset-app:  5.0.4 (4.5.4)
    @vue/babel-preset-jsx:  1.2.4 (1.1.2)
    @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 (1.1.2)
    @vue/babel-sugar-inject-h:  1.2.2 (1.1.2)
    @vue/babel-sugar-v-model:  1.2.3 (1.1.2)
    @vue/babel-sugar-v-on:  1.2.3 (1.1.2)
    @vue/cli-overlay:  5.0.4 (4.5.4)
    @vue/cli-plugin-babel: ^5.0.4 => 5.0.4 (4.5.4)
    @vue/cli-plugin-eslint: ^5.0.4 => 5.0.4
    @vue/cli-plugin-router: ^5.0.4 => 5.0.4 (4.5.4)
    @vue/cli-plugin-typescript: ^5.0.4 => 5.0.4
    @vue/cli-plugin-vuex:  5.0.4 (4.5.4)
    @vue/cli-service: ^5.0.4 => 5.0.4 (4.5.4)
    @vue/cli-shared-utils:  5.0.4 (4.5.4)
    @vue/compiler-core:  3.2.31 (3.0.0-rc.7)
    @vue/compiler-dom:  3.2.31 (3.0.0-rc.7)
    @vue/compiler-sfc:  3.2.31 (3.0.0-rc.7)
    @vue/compiler-ssr:  3.2.31 (3.0.0-rc.7)
    @vue/component-compiler-utils:  3.3.0 (3.2.0)
    @vue/devtools-api:  6.1.4
    @vue/eslint-config-standard: ^6.1.0 => 6.1.0
    @vue/eslint-config-typescript: ^10.0.0 => 10.0.0
    @vue/preload-webpack-plugin:  undefined (1.1.2)
    @vue/reactivity:  3.2.31 (3.0.0-rc.7)
    @vue/reactivity-transform:  3.2.31
    @vue/runtime-core:  3.2.31 (3.0.0-rc.7)
    @vue/runtime-dom:  3.2.31 (3.0.0-rc.7)
    @vue/server-renderer:  3.2.31
    @vue/shared:  3.2.31 (3.0.0-rc.7)
    @vue/web-component-wrapper:  1.3.0 (1.2.0)
    eslint-plugin-vue: ^8.6.0 => 8.6.0
    typescript: 4.5.5 => 4.5.5
    vue: ^3.2.31 => 3.2.31 (3.0.0-rc.7)
    vue-awesome-example:  2.0.0
    vue-demi:  undefined (0.12.5)
    vue-eslint-parser:  8.3.0
    vue-hot-reload-api:  2.3.4
    vue-i18n: ^9.1.9 => 9.1.9
    vue-loader:  17.0.0 (15.9.8, 16.0.0-beta.5, 15.9.3)
    vue-router: ^4.0.14 => 4.0.14
    vue-style-loader:  4.1.3 (4.1.2)
    vue-svg-loader: ^0.17.0-beta.2 => 0.17.0-beta.2
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

1. Clone from provided repository
2. run npm install
3. when its successfull, try to run npm install again
4. Error should show up in console

What is expected?

Successful npm install

What is actually happening?

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: cache-loader@4.1.0
npm ERR! Found: webpack@5.67.0
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^4.0.0 || ^5.0.0" from @soda/friendly-errors-webpack-plugin@1.8.1
npm ERR!   node_modules/@soda/friendly-errors-webpack-plugin
npm ERR!     @soda/friendly-errors-webpack-plugin@"^1.8.0" from @vue/cli-service@5.0.4
npm ERR!     node_modules/@vue/cli-service
npm ERR!       dev @vue/cli-service@"^5.0.4" from the root project
npm ERR!       5 more (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, ...)
npm ERR!   webpack@"^5.54.0" from @vue/cli-plugin-babel@5.0.4
npm ERR!   node_modules/@vue/cli-plugin-babel
npm ERR!     dev @vue/cli-plugin-babel@"^5.0.4" from the root project
npm ERR!   21 more (@vue/cli-plugin-eslint, @vue/cli-plugin-typescript, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^4.0.0" from cache-loader@4.1.0
npm ERR! node_modules/cache-loader
npm ERR!   peerOptional cache-loader@"^4.1.0" from @vue/cli-plugin-typescript@5.0.4
npm ERR!   node_modules/@vue/cli-plugin-typescript
npm ERR!     dev @vue/cli-plugin-typescript@"^5.0.4" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: webpack@4.46.0
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^4.0.0" from cache-loader@4.1.0
npm ERR!   node_modules/cache-loader
npm ERR!     peerOptional cache-loader@"^4.1.0" from @vue/cli-plugin-typescript@5.0.4
npm ERR!     node_modules/@vue/cli-plugin-typescript
npm ERR!       dev @vue/cli-plugin-typescript@"^5.0.4" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

[aethr]

This has started causing issues for us with the new node version v16.15.1 which bundles npm v8.11.0 which has stricter peer dependency resolution.

The workaround for us was to downgrade node to v16.15.0 which uses an earlier version of npm. However, it would be great if this could be fixed so we can keep rolling forward with node versions.

[EVogel1999]

So I was running into this issue trying to upgrade from @vue/cli-plugin-typescript 5.0.4 to 5.0.8. I don’t know if this will help anyone but I was able to upgrade by upgrading the version in the package.json and then running npm install --legacy-peer-deps.