Search code examples
node.jslinuxwebpackvue.jsopensuse

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


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.


Solution

  • 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