Vue-cli-plugin-eslint peer dependency problem

[throrin19]

Version

@vue/vue-cli-plugin-eslint@4.5.12

Environment info

System:
    OS: macOS 11.2.3
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    Node: 12.13.1 - ~/.nvm/versions/node/v12.13.1/bin/node
    Yarn: Not Found
    npm: 7.6.3 - ~/.nvm/versions/node/v12.13.1/bin/npm
  Browsers:
    Chrome: 89.0.4389.90
    Firefox: 85.0.2
    Safari: 14.0.3
  npmGlobalPackages:
    @vue/cli: 4.2.3

Steps to reproduce

install latest version of eslint in devDependencies (for me it's eslint@7.20.0) and install @vue/vue-cli-plugin-eslint

What is expected?

All packages install correctly

What is actually happening?

NPM error with eslint peer dependency :

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: my-project@1.22.1
npm ERR! Found: eslint@7.20.0
npm ERR! node_modules/eslint
npm ERR!   dev eslint@"7.20.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@">= 1.6.0 < 7.0.0" from @vue/cli-plugin-eslint@4.5.12
npm ERR! node_modules/@vue/cli-plugin-eslint
npm ERR!   dev @vue/cli-plugin-eslint@"4.5.12" from the root project

After research, I see the peer dependencies in @vue/vue-cli-plugin-eslint ignore latest eslint versions :

vue-cli/packages/@vue/cli-plugin-eslint/package.json

Line 35 in b0de229

"eslint": ">= 1.6.0 < 7.0.0"

[haoqunjiang]

For ESLint 7 support, please use @vue/cli-plugin-eslint v5.0.0-alpha.7

[fangbinwei]

For ESLint 7 support, please use @vue/cli-plugin-eslint v5.0.0-alpha.7

try vue upgrade eslint -t v5.0.0-alpha.7 to update plugin

[JStrebeyko]

What if the conflict is blocking us from installing dependencies?

ERROR  Error: Can't find @vue/cli-plugin-eslint in node_modules. Please install the dependencies first.
Or to force upgrade, you can specify your current plugin version with the --from option
Error: Can't find @vue/cli-plugin-eslint in node_modules. Please install the dependencies first.
Or to force upgrade, you can specify your current plugin version with the --from option
    at Upgrader.upgrade (/home/<user>/.nvm/versions/node/v14.17.4/lib/node_modules/@vue/cli/lib/Upgrader.js:71:13)
    at upgrade (/home/<user>/.nvm/versions/node/v14.17.4/lib/node_modules/@vue/cli/lib/upgrade.js:43:19)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)

[EDIT] using the --form option with semver notation from package.json allows the dependency installation process to run, but then vue-cli-service serve webpack throws:

 INFO  Starting development server...
(node:44127) UnhandledPromiseRejectionWarning: Error: Rule can only have one resource source (provided resource and test + include + exclude) in {
  "type": "javascript/auto",
  "include": [
    {}
  ],
  "use": []
}
    at checkResourceSource (/home/<user>/app/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:167:11)
    at Function.normalizeRule (/home/<user>/app/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:198:4)
    at /home/<user>/app/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:110:20
    at Array.map (<anonymous>)
    at Function.normalizeRules (/home/<user>/app/node_modules/@vue/cli-service/node_modules/webpack/lib/RuleSet.js:109:17)
    ...

[gmenunes]

This issue was solved here npm/cli#4664 (comment), for me.