VueJS: Error: listen EADDRNOTAVAIL: address not available

Question

i'm new to JS, recently I learn vue.js with Vue-CLI 2, but now i want to install the new version of Vue-CLI 4.3.0, I already doing step by step tutorial to install it, but when I'm run $ npm run serve it's give me error like this. i guess it's about IP address according to similar StackOverflow questions this (listen EADDRNOTAVAIL error in Node.js), but i really didn't know how to implement it

> vue-cli-new@0.1.0 serve /Users/arul/selfLearner/Vuejs_learn/vue-cli3-tutorial/vue-cli-new
> vue-cli-service serve

 INFO  Starting development server... 11% building 13/15 modules 2 active ...vue-cli-new/node_modules/webpack-dev-server/client/utils/reloadApp.jsevents.js:292
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRNOTAVAIL: address not available 36.86.63.182:8080
    at Server.setupListenHandle [as _listen2] (net.js:1296:21)
    at listenInCluster (net.js:1361:12)
    at GetAddrInfoReqWrap.doListen [as callback] (net.js:1498:7)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:71:10) Emitted 'error' event on Server instance at:
    at emitErrorNT (net.js:1340:8)
    at processTicksAndRejections (internal/process/task_queues.js:84:21) {   code: 'EADDRNOTAVAIL',   errno: -49,   syscall: 'listen',   address: '36.86.63.182',   port: 8080 } npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! vue-cli-new@0.1.0 serve: `vue-cli-service serve` npm ERR! Exit status 1 npm ERR!  npm ERR! Failed at the vue-cli-new@0.1.0 serve script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR!     /Users/arul/.npm/_logs/2020-04-07T10_46_15_552Z-debug.log

here is the log file

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   '/usr/local/Cellar/node/13.12.0/bin/node',
1 verbose cli   '/usr/local/bin/npm',
1 verbose cli   'run',
1 verbose cli   'serve'
1 verbose cli ]
2 info using npm@6.14.4
3 info using node@v13.12.0
4 verbose run-script [ 'preserve', 'serve', 'postserve' ]
5 info lifecycle vue-cli-new@0.1.0~preserve: vue-cli-new@0.1.0
6 info lifecycle vue-cli-new@0.1.0~serve: vue-cli-new@0.1.0
7 verbose lifecycle vue-cli-new@0.1.0~serve: unsafe-perm in lifecycle true
8 verbose lifecycle vue-cli-new@0.1.0~serve: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/arul/selfLearner/Vuejs_learn/vue-cli3-tutorial/vue-cli-new/node_modules/.bin:/Users/arul/google-cloud-sdk/bin:/usr/local/bin:/opt/anaconda3/condabin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Frameworks/Mono.framework/Versions/Current/Commands:/home/username/bin:/usr/local/homebrew:/Users/arul/development/flutter/bin
9 verbose lifecycle vue-cli-new@0.1.0~serve: CWD: /Users/arul/selfLearner/Vuejs_learn/vue-cli3-tutorial/vue-cli-new
10 silly lifecycle vue-cli-new@0.1.0~serve: Args: [ '-c', 'vue-cli-service serve' ]
11 silly lifecycle vue-cli-new@0.1.0~serve: Returned: code: 1  signal: null
12 info lifecycle vue-cli-new@0.1.0~serve: Failed to exec serve script
13 verbose stack Error: vue-cli-new@0.1.0 serve: `vue-cli-service serve`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/local/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.<anonymous> (/usr/local/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)
14 verbose pkgid vue-cli-new@0.1.0
15 verbose cwd /Users/arul/selfLearner/Vuejs_learn/vue-cli3-tutorial/vue-cli-new
16 verbose Darwin 19.2.0
17 verbose argv "/usr/local/Cellar/node/13.12.0/bin/node" "/usr/local/bin/npm" "run" "serve"
18 verbose node v13.12.0
19 verbose npm  v6.14.4
20 error code ELIFECYCLE

Answer 1

I had this happen when my /etc/hosts file got wiped out, so my call to localhost went out to the DNS servers and resolved to their IP. Your /etc/hosts on Mac needs to contain at least this mapping:

127.0.0.1   localhost

Answer 2

EADDRNOTAVAIL comes from your computer's networking code via your operating system.

When it comes from a listen() call, it means you tried to start a server (in your case a nodejs web server) to serve incoming requests on a nonexistent Internet Protocol (IP) address. In your case that bad address is 36.86.63.182. The port, 8080, is correct.

If you're on a mac or Linux box, you can give the command ifconfig. It will show a mess of information about your network interfaces. To pull out just the Internet Protocol addresses, use this

ifconfig | grep "inet "

On Windows, it's

ipconfig | findstr IPv4

I bet you there's no address 36.86.63.182 in that list. So, the nodejs server that's part of your Vue tutorial is trying to listen on somebody else's IP address. You Can't Do That™. You get EADDRNOTAVAIL when you try.

What you want in this case is to listen on address 0.0.0.0, which means "all addresses on this machine." Or, failing that, on the address 127.0.0.1, which means this machine's localhost loopback address.

The question is "why is it listening on the wrong address?" Hard to tell from here.

Is your vue server misconfigured? Look for

The simplest thing to try is rebooting your machine if possible. Maybe some wakky configuration has crept in since you last started it up. ???

The next thing to try: look for an environment variable, probably named HOST, that's set to the bogus IP address. On Mac / Linux

env | grep "36.86.63.182"

on Windows

set | findstr "36.86.63.182"

If you find an offending environment variable, you can delete it for the current session by saying, Linux / mac (give the name of the environment variable you found, here I use HOST as an example

unset HOST

Windows

set HOST=

Then things should work.

As for permanently getting rid of the bogus environment variable, look that up or ask for help.