Upgrading dependencies in vue-cli ui leads to error

[sandbo00]

Version

4.2.3

Environment info

  System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 AMD FX(tm)-8350 Eight-Core Processor
  Binaries:
    Node: 13.11.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.13.7 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.449.0
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

• start vue ui on any project with outdated dependencies
• in the web ui, choose to upgrade all outdated dependencies

What is expected?

npm should install new versions of all dependecies

What is actually happening?

npm errors out and shows me an error message in powershell:
npm ERR! code EINVALIDPACKAGENAME
npm ERR! Invalid package name "@vue/cli-service ": name cannot contain leading or trailing spaces; name can only contain URL-friendly characters

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\user\AppData\Roaming\npm-cache_logs\2020-03-20T11_14_40_522Z-debug.log
command failed: npm install --loglevel error @vue/cli-service @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/cli-plugin-router @vue/cli-plugin-typescript

---

Happened to me on multiple devices with clean installations, for about half a year now.
I use nvm windows.

[motla]

Hi! This bug annoyed me as well for quite some time.

This is because the packages list to update (their names separated by spaces) is passed to a single argument to execa, which calls npm with adding quotation marks around the argument. Like:

npm install "@vue/cli-service @vue/cli-plugin-babel @vue/cli-plugin/eslint ..."

So NPM tries to parse the string as a single package name and fails.

This issue seems to annoy only NPM users as Yarn is interfaced with an API instead of the CLI.

Here is a fix PR. Basically it splits the packages argument string to one argument per package.

In the meantime you can install Yarn on your computer and you will have the privilege to watch a progress bar indicating the state of your packages update in the UI, unlike the NPM implementation.