Conflicting peer dependency: eslint-plugin-vue on NPM 8

[OliverRC]

Checklist

• I have tried restarting my IDE and the issue persists.
• I have read the FAQ and my problem is not listed.

Tell us about your environment

• ESLint version: ^7.32.0
• eslint-plugin-vue version: ^8.0.3
• Node version: v16.16.0
• Operating System: Ubuntu 21.10 / Windows 11

Please show your full configuration:

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

What did you do?

1. Create new vue3 project with vue-cli
2. Run npm install

I am re-opening an issue that was closed without resolution but completely fails to address the reported issue which is 100% related to ESlint within Vue when using the Vue CLI.

#1931
vuejs/eslint-config-standard#24

What did you expect to happen?

It should work. The dependencies are just wrong, and now NPM 8 is enforcing them.

What actually happened?

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.

Repository to reproduce this issue

You don't need one as this breaks out the box from a new project.

[OliverRC]

Relates to #1931 which was close with no explanation or resolution

[OliverRC]

Relates to vuejs/eslint-config-standard#24 which has had no response

[OliverRC]

If you believe the issue is in the wrong place please don't just close the issue without at least engaging the author.
I am happy to log it elsewhere under the advisement of the community/team, however at present from a public perspective this seems like the correct place.

[ota-meshi]

I couldn't reproduce your problem. However, looking at the VueCLI documentation, VueCLI seems to be in maintenance mode.
I recommend not using it and manually installing the latest version.
I've opened a PR to remove how to install from VueCLI from the documentation for this plugin.

[OliverRC]

I was unable to reproduce this on a fresh project. I am going to have to compare what has changed since the issues were originally happening to find out what has changed and apply them to existing products which are currently breaking with this issue.

I will also have a look at the new Vite scaffolding and configuration and potential move off of Vue CLI:
https://vueschool.io/articles/vuejs-tutorials/how-to-migrate-from-vue-cli-to-vite/

[OliverRC]

@ota-meshi

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