Peer dependency conflict when creating projects using NPM 8

[OliverRC]

In reference to the following issue:
vuejs/vue-cli#7189

It looks like this library at the default install of version 6.1.0 when using the Vue CLI has incompatible peer dependencies with the eslint-plugin-vue module installed as part of the Vue CLI setup.

This is broken out the box on Vue CLI version 5.x on NPM 8

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @vue/[email protected]
npm ERR! Found: [email protected]
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/[email protected]
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: [email protected]
npm ERR! node_modules/eslint-plugin-vue
npm ERR!   peer eslint-plugin-vue@"^7.0.0" from @vue/[email protected]
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.

Step to Reproduce

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)

[frederikheld]

Same here. Tried to submit the issue to eslint-plugin-vue but they closed it.

--> vuejs/eslint-plugin-vue#1931

[OliverRC]

How frustrating that they just closed your PR with no discussion and then locked the thread @frederikheld.
Is anyone going to take accountability for the fact that ESLint on Vue is broken on NPM 8.

@ota-meshi how can you just close the PR with no explanation and no resolution to a legitimate issue.
@vuejs

ES Lint does not work out of the box with Vue CLI.

[OliverRC]

Actually I was able to reproduce this. It seems the offending configuration is the use of the option that uses the Standard configuration for the linter

vue create hello-world

Choose the following options:

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  <--------- This is what is causing the issue
? 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? No

Delete the node_modules folder

npm install

Breaks with the following error=

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @vue/[email protected]
npm ERR! Found: [email protected]
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/[email protected]
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: [email protected]
npm ERR! node_modules/eslint-plugin-vue
npm ERR!   peer eslint-plugin-vue@"^7.0.0" from @vue/[email protected]
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\<user>\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\<user>\AppData\Local\npm-cache\_logs\2022-10-04T07_28_32_337Z-debug-0.log

[lalainarahajason]

Exactly same error here, any solutions ?

[lalainarahajason]

npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: @vue/[email protected]

after steps above too

[OliverRC]

We've abandoned Vue-CLI in favour for Vite

[Hoon-Hub]

"eslint-plugin-vue": "^7.20.0",
I've changed "eslint-plugin-vue" to 7.20.0
and npm i -> audit fix.
after this work, command npm i worked well.