Unable to Upgrade/Install Dependencies

[cedon]

Version

5.0.4

Environment info

Environment Info:

  System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
  Binaries:
    Node: 14.17.3 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.12.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (102.0.1245.33)
  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.4 
    @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.4 
    @vue/cli-plugin-babel: ~5.0.0 => 5.0.4 
    @vue/cli-plugin-eslint: ~5.0.0 => 5.0.4 
    @vue/cli-plugin-router:  5.0.4 
    @vue/cli-plugin-vuex:  5.0.4 
    @vue/cli-service: ~5.0.0 => 5.0.4 
    @vue/cli-shared-utils:  5.0.4 
    @vue/compiler-core:  3.2.37 
    @vue/compiler-dom:  3.2.37 
    @vue/compiler-sfc:  3.2.37 
    @vue/compiler-ssr:  3.2.37 
    @vue/component-compiler-utils:  3.3.0 
    @vue/eslint-config-standard: ^6.1.0 => 6.1.0 
    @vue/reactivity:  3.2.37 
    @vue/reactivity-transform:  3.2.37 
    @vue/runtime-core:  3.2.37 
    @vue/runtime-dom:  3.2.37 
    @vue/server-renderer:  3.2.37 
    @vue/shared:  3.2.37 
    @vue/web-component-wrapper:  1.3.0 
    eslint-plugin-vue: ^8.0.3 => 8.7.1 
    vue: ^3.2.13 => 3.2.37 
    vue-eslint-parser:  8.3.0 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  17.0.0 (15.9.8)
    vue-style-loader:  4.1.3 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

Create new project using 'vue create project'
Run npm outdated
Run npm upgrade or npm install @formkit/vue

What is expected?

Project dependencies to be upgraded or FormKit or be installed and added as a dependency

What is actually happening?

NPM will throw the following:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: testproj@0.1.0
npm ERR! Found: eslint-plugin-vue@8.7.1
npm ERR! node_modules/eslint-plugin-vue
npm ERR! dev eslint-plugin-vue@"^8.0.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint-plugin-vue@"^7.0.0" from @vue/eslint-config-standard@6.1.0
npm ERR! node_modules/@vue/eslint-config-standard
npm ERR! dev @vue/eslint-config-standard@"^6.1.0" 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.
npm ERR!
npm ERR! See C:\Users\Jon\AppData\Local\npm-cache\eresolve-report.txt for a full report.

[yerol]

Npm 8 is a lot more strict in dependency resolution. You can use 'npm i --legacy-peer-deps' command until these packages are fixed/updated. You'll have the same issue with audit fix command too.

[cedon]

I forced an upgrade by editing package.json. I did see Vue-CLI released a new version too so hopefully that fixes the problem too even though I am not seeing anything in the release notes about it.

[cedon]

Ran into the same issue with trying to install pinia as well. Not sure if this should be closed since NPM is the culprit. Switching everything over to yarn eliminated the problem.

[OliverRC]

Yup, it seems with the latest NPM, it is broken out of the box:

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)

It looks like the culprit is @vue/eslint-config-standard, which has a peer dependency on eslint-plugin-vue at version 7 (^.7.0.0) only. I tried several combinations to resolve the conflict but have not won just yet.

Strangely the material claims the stricter rules for peer dependencies was added in NPM 7/8 but everything worked perfectly on npm version 8.3 but does not on the 8.16.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @vue/eslint-config-standard@6.1.0
npm ERR! Found: eslint-plugin-vue@8.5.0
npm ERR! node_modules/eslint-plugin-vue
npm ERR!   dev eslint-plugin-vue@"^8.0.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint-plugin-vue@"^7.0.0" from @vue/eslint-config-standard@6.1.0
npm ERR! node_modules/@vue/eslint-config-standard
npm ERR!   dev @vue/eslint-config-standard@"^6.1.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: eslint-plugin-vue@7.20.0
npm ERR! node_modules/eslint-plugin-vue
npm ERR!   peer eslint-plugin-vue@"^7.0.0" from @vue/eslint-config-standard@6.1.0
npm ERR!   node_modules/@vue/eslint-config-standard
npm ERR!     dev @vue/eslint-config-standard@"^6.1.0" 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.