vue/cli not working with npm7

[jloa]

Version

4.5.13

Reproduction link

n/a

Environment info

Environment Info:

  System:
    OS: Windows 10 10.0.19043
    CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
  Binaries:
    Node: 16.4.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - C:\Program Files\nodejs\yarn.CMD
    npm: 7.20.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 91.0.4472.164
    Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.71)
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

vue create bug

select vue2 project

cd bug
npm update

result:

npm ERR! node_modules/vue
npm ERR!   vue@"^2.6.11" from the root project
npm ERR!   peerOptional vue@"^2 || ^3.0.0-0" from @vue/babel-preset-app@4.5.13
npm ERR!   node_modules/@vue/babel-preset-app
npm ERR!     @vue/babel-preset-app@"^4.5.13" from @vue/cli-plugin-babel@4.5.13
npm ERR!     node_modules/@vue/cli-plugin-babel
npm ERR!       dev @vue/cli-plugin-babel@"~4.5.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @vue/compiler-sfc@"^3.0.8" from vue-loader-v16@16.3.2
npm ERR! node_modules/@vue/cli-service/node_modules/vue-loader-v16
npm ERR!   optional vue-loader-v16@"npm:vue-loader@^16.1.0" from @vue/cli-service@4.5.13
npm ERR!   node_modules/@vue/cli-service
npm ERR!     dev @vue/cli-service@"~4.5.0" from the root project
npm ERR!     4 more (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, ...)
npm ERR!
npm ERR! Conflicting peer dependency: vue@3.1.5
npm ERR! node_modules/vue
npm ERR!   peer vue@"3.1.5" from @vue/compiler-sfc@3.1.5
npm ERR!   node_modules/@vue/compiler-sfc
npm ERR!     peerOptional @vue/compiler-sfc@"^3.0.0-beta.14" from @vue/cli-service@4.5.13
npm ERR!     node_modules/@vue/cli-service
npm ERR!       dev @vue/cli-service@"~4.5.0" from the root project
npm ERR!       4 more (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, ...)
npm ERR!     peer @vue/compiler-sfc@"^3.0.8" from vue-loader-v16@16.3.2
npm ERR!     node_modules/vue-loader-v16
npm ERR!       optional vue-loader-v16@"npm:vue-loader@^16.1.0" from @vue/cli-service@4.5.13
npm ERR!       node_modules/@vue/cli-service
npm ERR!         dev @vue/cli-service@"~4.5.0" from the root project
npm ERR!         4 more (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, ...)
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.```


### What is expected?
Expected to work.

### What is actually happening?
Not working.

---

optional vue-loader-v16@"npm:vue-loader@^16.1.0"

Possible solution: remove optional vue-loader-v16 and sfc as vue2 doesn't need it.
Or fallback to npm 6.x.x.
Sreencast @ https://youtu.be/DUKmYdMgE4E

<!-- generated by vue-issues. DO NOT REMOVE -->

[AntonLugtenburg]

I have the same issues
$ node -v
v14.8.0
$ npm -v
7.12.1

I'm running npm update --legacy-peer-deps to get around the bugs, but i'm not quite sure if this is good practice...

[jloa]

I have the same issues
$ node -v
v14.8.0
$ npm -v
7.12.1

I'm running npm update --legacy-peer-deps to get around the bugs, but i'm not quite sure if this is good practice...

Also npm update --force seems to work

[haoqunjiang]

Fixed in vue-loader@16.3.3