webpack-serve uses a 8080 or random port instead of config and doesn't terminate the server

[kamthamc]

• Operating System: OSX High Sierra
• Node Version: 9.9
• NPM Version: 5.6.0
• Yarn Version: 1.5.1
• webpack Version: 4.3.0
• webpack-serve Version: 0.2.0

This issue is for a:

• bug
• feature request
• modification request

Code

webpack-serve

CLI Command

  $ webpack-serve 

webpack.config.js

https://gist.github.com/kamthamc/8d8c4594965882abbdd11c8338e8fe82

serve.config.js

const serve = require('webpack-serve');
const config = require('./webpack.config.js');

serve({
  config,
  port: 9090,
  clipboard: false,
  http2: false,
  logLevel: 'info',
  logTime: true,
  open: true,
});

Expected Behavior

Should run server on port 9090 as in config.
should terminate all the processes, close the ports if terminating
similar to issue #37

$ webpack-serve
ℹ ｢hot｣: webpack: Compiling...
ℹ ｢hot｣: webpack: Compiling...
ℹ ｢hot｣: WebSocket Server Listening at localhost:8081
[15:32:19] ℹ ｢serve｣: Project is running at http://localhost:9090
✖ ｢hot｣: WebSocket Server Error { Error: listen EADDRINUSE 127.0.0.1:8081
    at Server.setupListenHandle [as _listen2] (net.js:1345:14)
    at listenInCluster (net.js:1386:12)
    at GetAddrInfoReqWrap.doListen [as callback] (net.js:1501:7)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:72:10)
  errno: 'EADDRINUSE',
  code: 'EADDRINUSE',
  syscall: 'listen',
  address: '127.0.0.1',
  port: 8081 }
[15:32:19] ℹ ｢serve｣: Project is running at http://localhost:8080
[15:32:19] ℹ ｢serve｣: Server URI copied to clipboard
ℹ ｢wdm｣: wait until bundle finished:
ℹ ｢wdm｣: wait until bundle finished: /

Actual Behavior

initially looks like starting at the configured port but runs at port 8080
the ports are not closed the processes are not terminated properly

How Do We Reproduce?

Start webpack-serve and hit Ctrl+C to kill, then start again and see if you get the 'port in use' error.

[shellscape]

Thanks for the issue 🍺 Unfortunately we have a slew of tests that show otherwise, on both claims of bugs. Not really sure where your claim about 8080 came from as your output clearly shows the server running on 9090 and the webpack-hot-client WebSocket server running on 8081. If you can put together a repo that reproduces this consistently, we'll have another look at it. But referencing the tests and quite a few users without this issue, we can only chalk this up to an environment issue on your end.

[kamthamc]

@shellscape if you look at the output 4th line from the bottom you can see its serving from port 8080. I cant publish my repo but i can try to put up a demo repository

[shellscape]

Yeah, saw that. That's why I said you have an environment issue on your end. The server never runs twice without something telling it to do so.

If you can put together a repo that reproduces this consistently, we'll have another look at it.

Reiterating that - this isn't something we see in tests or actual real-world use. The onus is going to have to fall to you to figure out what's causing it. I'd recommend starting with a simplified version of your config and tooling, and slowing adding back features. That typically reveals what's gone awry (and it's usually outside of this module). If you find something behaving badly in this module or it's dependencies, then we can investigate further.

[kamthamc]

@shellscape I am able to reproduce using the repo https://github.com/kamthamc/webpack-serve-demo

[shellscape]

@kamthamc there's a good reason why 😄 your server.config.js file is spawning an instance of webpack-serve https://github.com/kamthamc/webpack-serve-demo/blob/f1a2dc5d435e6b4f7db009f556b42fca865a53fd/serve.config.js#L5 as is your npm script https://github.com/kamthamc/webpack-serve-demo/blob/f1a2dc5d435e6b4f7db009f556b42fca865a53fd/package.json#L8. A config file shouldn't be spawning the tool that it's supposed to export the config for. There's a fundamental misunderstanding of the tooling here. server.config.js should export an object, not call serve.

[kamthamc]

@shellscape thank you just confused with https://github.com/webpack-contrib/webpack-serve#api
will try again

[jpike88]

// webpack.config.js
const StatsPlugin = require('stats-webpack-plugin');
const path = require('path')
module.exports = {
  // ...
  entry: './www/entry.js',
  module: {
    noParse: function (content) {
      return /lib\//.test(content);
    }
  },
  devServer: {
    contentBase: path.join(__dirname, 'public')
  },
  output: {
    filename: 'bundle.js',
    path: __dirname + '/public/assets'
  },
  mode: 'development',
  plugins: [
    // ...
    new StatsPlugin('webpack-stats.json', {
      chunks: false,
      modules: false,
      children: false,
      cached: false,
      reasons: false,
      source: false,
      errorDetails: false,
      chunkOrigins: false,
    })
  ]
};

Its happening with me too.. looks like I'll be using another tool

[shellscape]

@jpike88 cheers, best of luck.

[Psvensso]

Got the same issue on win10, clean installation with no other messy processes around.

$ webpack-serve
i ｢hot｣: webpack: Compiling...
i ｢hot｣: webpack: Compiling...
i ｢hot｣: WebSocket Server Listening at localhost:63716
i ｢serve｣: Project is running at http://localhost:8080
i ｢serve｣: Server URI copied to clipboard
i ｢hot｣: WebSocket Server Listening at localhost:63717
× ｢serve｣:  { Error: listen EADDRINUSE 127.0.0.1:8080
    at Object._errnoException (util.js:1031:13)
    at _exceptionWithHostPort (util.js:1052:20)
    at Server.setupListenHandle [as _listen2] (net.js:1367:14)
    at listenInCluster (net.js:1408:12)
    at GetAddrInfoReqWrap.doListen [as callback] (net.js:1523:7)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:102:10)
  errno: 'EADDRINUSE',
  code: 'EADDRINUSE',
  syscall: 'listen',
  address: '127.0.0.1',
  port: 8080 }
i ｢hot｣: webpack: Compiling Done
i ｢wdm｣: Hash: e2de1ec3ca146410b269

[eobeda]

@Psvensso Looks like the address ( 127.0.0.1:8080 / localhost:8080 ) is already in use, based on the EADDRINUSE error. Does the DOS command "netstat -no" show that the port is not currently being used, prior to starting webpack-serve ? Port 8080 is a very popular value. Might suggest configuring webpack-serve to use a different port

hot: {
host: 'localhost',
port: 8081,
},

and try again.

PS: webpack-serve runs on two ports. Your issue appears to be with the WebSocket instance.

[antony]

Not sure if it helps but my project is experiencing this too - I've noticed that it runs the application twice:

ℹ ｢serve｣: Project is running at http://localhost:37233
ℹ ｢serve｣: Server URI copied to clipboard
ℹ ｢serve｣: Project is running at http://localhost:41811
ℹ ｢serve｣: Server URI copied to clipboard

So if I set the port:

ant@convey:~/Projects/my-application$ webpack-serve
ℹ ｢hot｣: WebSocket Server Listening on localhost:44301
ℹ ｢hot｣: Applying DefinePlugin:__hotClientOptions__
ℹ ｢hot｣: webpack: Compiling...
ℹ ｢serve｣: Serving Static Content from: /
ℹ ｢hot｣: WebSocket Server Listening on localhost:33915
ℹ ｢hot｣: Applying DefinePlugin:__hotClientOptions__
ℹ ｢hot｣: webpack: Compiling...
ℹ ｢serve｣: Serving Static Content from: /
ℹ ｢serve｣: Project is running at http://localhost:1234
ℹ ｢serve｣: Server URI copied to clipboard
events.js:165
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE 127.0.0.1:1234
    at Server.setupListenHandle [as _listen2] (net.js:1346:14)
    at listenInCluster (net.js:1387:12)
    at GetAddrInfoReqWrap.doListen [as callback] (net.js:1502:7)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:72:10)
Emitted 'error' event at:
    at emitErrorNT (net.js:1366:8)
    at process._tickCallback (internal/process/next_tick.js:178:19)

Still trying to figure out what's going on here

[getchardy]

I'm seeing exactly the same thing as @antony when using global webpack-serve --config <...>.

However, I found that if I run it as ./node_modules/.bin/webpack-serve --config <...> then it works as expected. Version 5.6.0.

[felipap]

Thanks, @CHardyDev. Your fix worked for me. This is surely a bug, right, @shellscape?