Overlay doesn't work with random port started

[doughamlin]

Do you want to request a feature or report a bug?
bug

What is the current behavior?
With #1054, you can start a server with a random port, however adding overlay: true to the options doesn't enable the overlay as expected.

If the current behavior is a bug, please provide the steps to reproduce.

1. Modify the node-api-simple example to this:

    'use strict';
   
    const Webpack = require('webpack');
    const WebpackDevServer = require('../../lib/Server');
    const webpackConfig = require('./webpack.config');
   
    const compiler = Webpack(webpackConfig);
    const server = new WebpackDevServer(compiler, {
      overlay: true,
      stats: {
        colors: true
      }
    });
   
    server.listen(0, '127.0.0.1', () => {
      const port = server.listeningApp.address().port;
   
      console.log(port);
    });
   

2. Open browser to localhost on the logged port

3. In app.js, uncomment the code that results in an error and save.

4. No overlay appears.

What is the expected behavior?
The overlay appears.

Please mention your webpack and Operating System version.
This commit
macOS 10.12.6

[doughamlin]

I know the reason for this is webpack.config.js needs to be updated with the port number, but this is seemingly impossible given the port is unknown, so I think this is rightly considered a bug (anyway it is keeping me from doing what I want to do).

[shellscape]

So it's documented, it's due to a bad sockjs port configuration:

[shellscape]

Digging into this further, it would appear that on this line, __resourceQuery is equal to "?http://0.0.0.0" which throws off getting the port on line 179 as urlParts.port is null. Now it's pretty trivial to correct this in the client script, which I've done as a proof of concept for a fix, but I'd rather get down to why the __resourceQuery value is incorrect. I'll spend a little time on that, and if I don't make any progress, make the fix in the client.

[shellscape]

@doughamlin so what you should have done was open up webpack.config.js and changed:

entry: ['./app.js', '../../client/index.js?http://localhost:8080/'],

to

entry: ['./app.js', '../../client/index.js?http://localhost:0/'],

Now, had the port parsing in the client been correct, that would have yielded the results you were after. I have a fix incoming for this but your config is going to have to look something like this:

'use strict';

module.exports = {
  context: __dirname,
  entry: ['./app.js', '../../client/index.js?http://localhost:0/'],
  output: {
    filename: 'bundle.js'
  },
  devServer: {
    overlay: true
  }
};

Now you can always omit the entry property, like in the host-port example, if that's a possibility for you and things should work as expected there too.

My fix is going to change two things:

1. in Server.js the socket server won't be initialized nor started until the listeningApp triggers the callback on listen. That's really the proper time for the socket server to be initialized anyhow.
2. in client/index.js the port parsing is going to look for null and '0' on urlParts.port and that'll be refactored slightly.

Once that's in place you should be good to go. Hopefully this will all become moot with 3.x when I get around to refactoring WebSockets and removing the SockJS dependency. Look for the fix to drop in master sometime tonight.

[doughamlin]

@shellscape Works great. Thanks!