Websocket and /info requests go to wrong domain when using default port

[joeldenning]

• Operating System: osx

• Node Version: 12.6.0

• NPM Version: 6.9.0

• webpack Version: 4.36.1

• webpack-dev-server Version: 3.7.2

• Browser: Firefox and Chrome (both)

• This is a bug

• This is a modification request

Code

(See repo that demonstrates the problem: https://github.com/joeldenning/webpack-dev-server-ws-bug)

Run webpack-dev-server without a port specified (not through the CLI nor webpack config). The server will be automatically assigned a default port, usually 8080.

Now start a static http server on a different port (let's say port 5000). Create an html file that loads the webpack bundle: <script src="http://localhost:8080/main.js">.

Make sure that webpack-dev-server is configured to reload the page whenever the bundle is recompiled. The webpack-dev-server client will attempt to open a web socket to the wrong host. When the web socket fails, it will start making XHR requests to /info in an infinite loop, once every few seconds. Each of the requests will fail because they are to the wrong host.

Expected Behavior

The websocket and /info requests should go to http://localhost:8080. For example the XHR request for /info should go to http://localhost:8080/info.

Actual Behavior

The web socket and XHR requests go to http://localhost, without the :8080 port on it. For example, the /info request goes to http://localhost/info.

Note that if you specify --port 8080 when you run webpack-dev-server, that the behavior is corrected and the /info request goes to http://locahost:8080/info.

webpack-dev-server should work without having to specify a port.

For Bugs; How can we reproduce the behavior?

https://github.com/joeldenning/webpack-dev-server-ws-bug

[joeldenning]

Things I've found so far about this bug

It seems related to the following lines of code:

• Server.js calls updateCompiler without passing the http server object
• updateCompiler.js calls addEntries without passing the http server object
• addEntries relies on a specified webpack config port
• addEntries calls createDomain without passing in the http server object

My understanding is that in order to fix the bug that we'll have to call server.address() to get the port that was chosen. However, we cannot call server.address() until the listening event has been emitted. (see docs).

So webpack-dev-server is 1) not passing along the server object to the addEntries function, and 2) calling addEntries before the server object is created (and also before the listening event is fired). Compare order of execution for the following:

• calling updateCompiler
• creating a server
• Waiting for listening event just isn't happening at all right now.

[joeldenning]

Upon further debugging, it looks like the best place to fix it might be in processOptions, which is right now intentionally letting port not be specified until after the server is instantiated. See

webpack-dev-server/lib/utils/processOptions.js

Line 24 in 45006e1

const options = createConfig(config, argv, { port: defaultPort });