[BUG] serve script doesn't start http server after upgrade to npm 7

[jost-s]

Current Behavior:

Running npm run serve in a Vue CLI generated project compiles successfully but doesn't start the development server.
From package.json:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }

The output at the end of compilation is

DONE  Compiled successfully in 37363ms                                                                                                                                                                                                                                                  5:25:52 PM

No type errors found
Version: typescript 3.9.7
Time: 13398ms

Before the upgrade to npm 7, the server started as usual. When I run ./node_modules/.bin/vue-cli-service serve, the server starts as usual too. Lastly when I create a fresh Vue app with the CLI and run the server script, the server starts successfully as well, using npm 7:

DONE  Compiled successfully in 90751ms                                                                                               6:19:22 PM

No type errors found
Version: typescript 3.9.7
Time: 12908ms

  App running at:
  - Local:   https://192.168.0.1:8080/ 
  - Network: https://192.168.0.1:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

Expected Behavior:

Dev server starts just like before the upgrade from npm 6 to npm 7.

Steps To Reproduce:

I cannot reproduce the problem yet and am asking for help to debug the issue. How can I get information about what's going wrong during server startup?

Environment:

OS: macOS 10.15.7
Node: 12.16.1
npm: 7.5.4

[jost-s]

What I noticed is that calling ./node_modules/@vue/cli-service/bin/vue-cli-service.js serve does not work either, it produces the same result as npm run serve. Could it be that the resolution of the command to call differs from npm 6 to 7?

[ljharb]

It’s possible the version of the cli-service has changed, and thus the path to the binary. Generally you want to reference the bin name in node_modules/.bin, not the JavaScript file it happens to point to.

[jost-s]

@ljharb Thanks for your reply. I haven't upgraded anything else other than npm though. When I downgrade npm to 6, the command npm run serve works, upgrading to npm 7 breaks it again.

[ljharb]

What about npx vue-cli-service serve in both?

[jost-s]

@ljharb That command works with npm 6.4.11 (server starts) and doesn't work with npm 7.5.6 (server not started).

Again a few more tests later:
For this project, I'm overriding the hosts table on my Mac to map 127.0.0.1 to a domain name. Therefore I need to start the dev server with sudo.
With npm 6.4.11

• sudo npm run serve ✅
• sudo npx vue-cli-service serve ✅
• npm run serve ❌
• npx vue-cli-service serve ❌

With npm 7.5.6

• sudo npm run serve ❌
• sudo npx vue-cli-service serve ❌
• npm run serve ❌
• npx vue-cli-service serve ❌

Could it be to do with that?

[ljharb]

@jost-s I would not expect any of those to run with sudo (nor should they be). However, it looks like it fails in both without sudo. it's entirely possible that npm/npx treats sudo differently in v7.

See https://thomashunter.name/blog/using-authbind-with-node-js/ for a better approach than using sudo.

[jost-s]

@ljharb Thanks for pointing me to that. Yeah, it's not great to use sudo for this.

I've installed authbind but it doesn't work yet, neither with npm 6 nor 7. I'll keep trying and get back to you.

[jost-s]

@ljharb After more trial and error I am sure that npm 7 handles sudo differently. But, now that I've taken out pieces from the project in question and ran npm run serve, the server starts fine, just not with a port < 1024. So there must be an issue with the piece of my project.

I'll figure out what the problem is and then go about using authbind or pfctl to use the port I need. Once that's solved I'll come back here to close the ticket.

[jost-s]

@ljharb authbind works well, but only for the node command. It doesn't work with npm. For example I can run an express server with authbind node my-express-server on port 443. But using the command to launch a webpack dev server authbind npm run serve on port 443 results in the server running on port 1024.
Do you have an idea why?

[ljharb]

I don’t; but I’d expect authbind to be part of the script instead of part of the npm command.

[jost-s]

Absolute, I agree. What I meant to say was that authbind ./node_modules/.bin/vue-cli-service serve doesn't start the server on port 443.
Anyway, it's clear that this is not an npm error as such. It behaves differently now as compared to version 6, but it's not an error.
Thanks for your help @ljharb, much appreciated!