Vue CLI & Webpack: can't get webpack-dev-server to run

Question

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.

Answer 1

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.

Answer 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