Unable to start vue due to issue with npm run serve

[gregorypierce]

Version

3.9.3

Environment info

Environment Info:

  System:
    OS: macOS 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
  Binaries:
    Node: 10.16.0 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.9.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 75.0.3770.142
    Firefox: Not Found
    Safari: 12.1.2
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.0.0
    @vue/babel-preset-app:  3.9.2
    @vue/babel-preset-jsx:  1.1.0
    @vue/babel-sugar-functional-vue:  1.0.0
    @vue/babel-sugar-inject-h:  1.0.0
    @vue/babel-sugar-v-model:  1.0.0
    @vue/babel-sugar-v-on:  1.1.0
    @vue/cli-overlay:  3.9.0
    @vue/cli-plugin-babel: ^3.9.0 => 3.9.2
    @vue/cli-plugin-eslint: ^3.9.0 => 3.9.2
    @vue/cli-service: ^3.9.0 => 3.9.3
    @vue/cli-shared-utils:  3.9.0
    @vue/component-compiler-utils:  2.6.0 (3.0.0)
    @vue/preload-webpack-plugin:  1.1.0
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^5.0.0 => 5.2.3 (4.7.1)
    vue: ^2.6.10 => 2.6.10
    vue-eslint-parser:  2.0.3 (5.0.0)
    vue-hot-reload-api:  2.3.3
    vue-loader:  15.7.1
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.10 => 2.6.10
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: 3.9.3

Steps to reproduce

vue create vue-test
cd vue-test
npm run serve

What is expected?

Normal running of vue process and to be able to see a web page with the vue information attached to it.

What is actually happening?

Receiving an error from Vue claiming that it cannot get access to a port. The port is available and have performed a check on MacOS to ensure that nothing is listening to or blocking the port

---

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/Cellar/node/12.6.0/bin/node',
1 verbose cli '/usr/local/bin/npm',
1 verbose cli 'run',
1 verbose cli 'serve' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'preserve', 'serve', 'postserve' ]
5 info lifecycle [email protected]preserve: [email protected]
6 info lifecycle [email protected]serve: [email protected]
7 verbose lifecycle [email protected]serve: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]serve: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/gpierce/Desktop/vuetest/node_modules/.bin:/anaconda3/bin:/anaconda3/condabin:/usr/local/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin:/Library/Frameworks/Mono.framework/Versions/Current/Commands
9 verbose lifecycle [email protected]serve: CWD: /Users/gpierce/Desktop/vuetest
10 silly lifecycle [email protected]serve: Args: [ '-c', 'vue-cli-service serve' ]
11 silly lifecycle [email protected]serve: Returned: code: 1 signal: null
12 info lifecycle [email protected]serve: Failed to exec serve script
13 verbose stack Error: [email protected] serve: vue-cli-service serve
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16)
13 verbose stack at EventEmitter.emit (events.js:198:13)
13 verbose stack at ChildProcess. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:198:13)
13 verbose stack at maybeClose (internal/child_process.js:982:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid [email protected]
15 verbose cwd /Users/gpierce/Desktop/vuetest
16 verbose Darwin 18.7.0
17 verbose argv "/usr/local/Cellar/node/12.6.0/bin/node" "/usr/local/bin/npm" "run" "serve"
18 verbose node v10.16.0
19 verbose npm v6.9.0
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] serve: vue-cli-service serve
22 error Exit status 1
23 error Failed at the [email protected] serve script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

[gregorypierce]

Command line specifically will say:

gpierce$ npm run serve

[email protected] serve /Users/gpierce/Desktop/vuetest
vue-cli-service serve
vue-cli-service serve

INFO Starting development server...
10% building 5/5 modules 0 activeevents.js:174
throw er; // Unhandled 'error' event
^

Error: listen EADDRNOTAVAIL: address not available 23.202.231.169:8080
at Server.setupListenHandle [as _listen2] (net.js:1262:19)
at listenInCluster (net.js:1327:12)
at GetAddrInfoReqWrap.doListen [as callback] (net.js:1460:7)
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:61:10)
Emitted 'error' event at:
at emitErrorNT (net.js:1306:8)
at process._tickCallback (internal/process/next_tick.js:63:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] serve: vue-cli-service serve
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

[gregorypierce]

This will resolve on MacOS -only- if you force the host to be 0.0.0.0. Otherwise, it will try to use the IP address it believes this should resolve to and fail.

[haoqunjiang]

Do you have a $HOST environment variable that set to 23.202.231.169?

[gregorypierce]

gpierce$ echo $HOST
x86_64-apple-darwin13.4.0

[haoqunjiang]

What about node -e 'console.log(process.env.HOST)'?
If it's still x86_64-apple-darwin13.4.0, what about ping $HOST?

If none of these results in 23.202.231.169, then it's weird…

[haoqunjiang]

Here's how we get the public IP address:

vue-cli/packages/@vue/cli-service/lib/util/prepareURLs.js

Lines 37 to 38 in 76eb714

	const result = defaultGateway.v4.sync()
	lanUrlForConfig = address.ip(result && result.interface)

I believe the logic on the Vue CLI side is bug-free.
It might be a bug in https://github.com/silverwind/default-gateway or https://github.com/node-modules/address under your particular network environment.

[gregorypierce]

gpierce$ node -e 'console.log(process.env.HOST)'
x86_64-apple-darwin13.4.0

gpierce$ ping $HOST
ping: cannot resolve x86_64-apple-darwin13.4.0: Unknown host

[haoqunjiang]

So that's the problem.
You need to append 127.0.0.1 x86_64-apple-darwin13.4.0 to /etc/hosts or unset it when starting the dev server (HOST= yarn serve).

It is because process.env.HOST can be used to specify the default host that the Vue CLI dev server binds to. So when you have this environment variable set (and exported), it will try to bind to it and somehow resolved to 23.202.231.169, which is incorrect, thus the error.

[gregorypierce]

Never done that manually on any MacOS machine before and I've been developing on vuejs for a while now. Deployed projects and everything. Something somewhere has changed to require that.

…

On Sun, Jul 28, 2019, 1:24 AM Haoqun Jiang ***@***.***> wrote: Closed #4366 <#4366>. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#4366?email_source=notifications&email_token=AAAXNUW4EAPJAEOJXTVKUMLQBUUPRA5CNFSM4IHCEZK2YY3PNVWWK3TUL52HS4DFWZEXG43VMVCXMZLOORHG65DJMZUWGYLUNFXW5KTDN5WW2ZLOORPWSZGOSXQO4AY#event-2514546179>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAAXNURRLSBRPMVLLRWBVTDQBUUPRANCNFSM4IHCEZKQ> .

[haoqunjiang]

I'm also quite curious about this issue. It's not the first time I've seen this.

Did you just installed anaconda?

[Uzay-G]

Hi, I'm getting a similar error:

13 verbose stack Error: [email protected] serve: vue-cli-service serve
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:315:20)
13 verbose stack at ChildProcess. (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:315:20)
13 verbose stack at maybeClose (internal/child_process.js:1026:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)

I tried echoing my $HOST and it was undefined. So of course process.env.HOST was the same.

Could someone give me a tip on how to fix this?