2

i'm generating a webpack development server with vue init webpack project-name. after generating the server, running npm run dev produces the following error:

> client@1.0.0 dev /home/localhost/dev/vuetest/client
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 10% building modules 1/3 modules 2 active .../client/index.js?http://localhost:8080events.js:167
      throw er; // Unhandled 'error' event
      ^

Error: getaddrinfo ENOTFOUND localhost
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:50:26)
Emitted 'error' event at:
    at GetAddrInfoReqWrap.doListen [as callback] (net.js:1498:12)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:50:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! client@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the client@1.0.0 dev 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!     /home/localhost/.npm/_logs/2018-06-17T22_25_08_212Z-debug.log

here's the dev script from package.json, autogenerated by vue

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"

here's the versions of node and vue-cli i'm using:

$ node -v
v10.4.0
$ vue -V
3.0.0-rc.2

things i've tried so far:

  • rolling back webpack-dev-server and webpack itself to prior versions
  • checking all of my ports; i definitely have nothing running on :8080 and webpack is supposed to automatically seek a new port anyways. previous answers to this issue widely suggest that this is a port conflict issue, but that's not the case here.
  • reinstalling vue-cli

interestingly, i get this error on both Windows 10 and openSUSE Tumbleweed (the current machine), but when i generate the same vue project on an Ubuntu VM, it works perfectly.

EDIT:

the problem was due to webpack.dev.conf.js attempting to use my linux hostname instead of the default "localhost". changing this line:

host: HOST || config.dev.host,

to this:

host: "localhost",

solved the issue.

betweenvenus
  • 19
  • 1
  • 7
  • 1
    could it be `localhost` not defined in your hosts file somehow? – Dan Oswalt Jun 17 '18 at 23:19
  • if so, possible duplicate of https://stackoverflow.com/questions/35757799/webpack-dev-server-cant-find-localhost – Dan Oswalt Jun 17 '18 at 23:24
  • i don't think so - i should've also mentioned that vue-cli works perfectly with browserify. it's specifically related to webpack, as far as i can tell. EDIT: just tried out the recommended solution from this link and nothing has changed. – betweenvenus Jun 17 '18 at 23:56
  • What happens if you run `ping localhost` in cmd or terminal? – Slava Knyazev Jun 18 '18 at 00:31
  • you just helped me figure it out!! it wasn't actually trying to host it on localhost; it was trying to host it at my *hostname* in openSUSE. in my OP i censored my hostname with "localhost", thinking that the hostname variable and the localhost address were synonymous. i changed the host in the webpack dev configuration to "localhost" and it fixed everything. – betweenvenus Jun 18 '18 at 00:44
  • @betweenvenus you should write that up as an answer. It's unlikely you'll be the only person running into this issue – Phil Jun 18 '18 at 01:01

2 Answers2

2

Try creating project with this. You use version 3 rc.2 and init command belongs to version 2.

vue create project-name

Docs: https://cli.vuejs.org/guide/creating-a-project.html#using-the-gui

enter image description here

atilkan
  • 4,527
  • 1
  • 30
  • 35
0

there were two solutions to this problem:

as @atilkan pointed out, the vue init project-name command has been deprecated as of Vue CLI 3. using vue create project-name, i've been able to successfully generate and run a development server. you can read more about Vue CLI 3's new project creation syntax here.

also, the project originally created by the deprecated vue init command was failing to assign itself the proper hostname. the problem was due to webpack.dev.conf.js attempting to use my linux hostname instead of the default "localhost". changing this line:

host: HOST || config.dev.host,

to this:

host: "localhost",

solved the issue. Error: getaddrinfo ENOTFOUND yourHostName errors may be fixable by doing this, though this is probably not the best method.

betweenvenus
  • 19
  • 1
  • 7