Webpack-dev-server: HMR/WDS client port ignored

[asterikx]

I'm upgrading one of my projects from webpack v1.x to v2.x (most recent beta).
My setup can be illustrated as follows:

 Host OS              +-------------------------------------------+
                      | Linux VM (VMWare)                         |
                      |                                           |
+---------+   9081 +-----+    81 +-------+   8080 +------------+  |
| Browser |------->| NAT |------>| nginx |------->|   Webpack  |  |
|         |<-------|     |<------|       |<-------| dev-server |  |
+---------+        +-----+       +-------+        +------------+  |
                      |                                           |
                      +-------------------------------------------+

I have webpack-dev-server running in my VM on port 8080 and nginx acting as a reverse proxy. As I want to test my app on my host OS, I have set up the VMware NAT-Utility Service to forward requests on port 9081 (host) to port 81 (VM).

With webpack v.1x I got HMR working by adding the entry point webpack-dev-server/client?http://0.0.0.0:9081 to my webpack-config. But this seems to break with Webpack v2.x. The browser's output suggests that client?http://0.0.0.0:9081 just gets ignored as request are issued to port 8080.

[HMR] Waiting for update signal from WDS...
[WDS] Hot Module Replacement enabled.
GET http://localhost:8080/sockjs-node/info?t=1479759389108 net::ERR_CONNECTION_REFUSED
[WDS] Disconnected!
GET http://localhost:8080/sockjs-node/info?t=1479759392164 net::ERR_CONNECTION_REFUSED
GET http://localhost:8080/sockjs-node/info?t=1479759396279 net::ERR_CONNECTION_REFUSED
GET http://localhost:8080/sockjs-node/info?t=1479759405260 net::ERR_CONNECTION_REFUSED

I'm not sure if this is a bug or if I'm missing something...

Here is my webpack-config (webpack-dev-server --config webpack.config.debugHot.js). Here the relevant part of my ngnix config for completeness.

[SpaceK33z]

Instead of 0.0.0.0, could you try the specific IP the VM is on?

[asterikx]

With webpack-dev-server/client?http://192.168.6.128:9081 (the IP is right as I can reach nginx on that IP) I get the following messages:

[HMR] Waiting for update signal from WDS...
GET http://192.168.6.128:9081/sockjs-node/info?t=1479817889657 net::ERR_CONNECTION_REFUSED
[WDS] Disconnected!
GET http://localhost:8080/sockjs-node/info?t=1479817889655 net::ERR_CONNECTION_REFUSED
GET http://192.168.6.128:9081/sockjs-node/info?t=1479817891765 net::ERR_CONNECTION_REFUSED
GET http://localhost:8080/sockjs-node/info?t=1479817893682 net::ERR_CONNECTION_REFUSED
GET http://192.168.6.128:9081/sockjs-node/info?t=1479817896821 net::ERR_CONNECTION_REFUSED
...

This time [WDS] Hot Module Replacement enabled is missing from the output

[SpaceK33z]

Ah I think I understand the issue. Since webpack v2, inline mode is enabled by default if you use the CLI. This means that it automatically included the webpack-devserver/client script. However, you also included that manually.

The cleanest way to fix it is to remove webpack-devserver/client from your entry. There are two ways to make WDS listen to the correct domain:

1) webpack-dev-server --public=0.0.0.0:9081
2) To the devServer object in your webpack config, add public:'0.0.0.0:9081'

[asterikx]

This solved my issue! Thanks a lot. Really appreciate your quick replies

[huyngkh]

Answer from @SpaceK33z solved my issue as well! it helps me save a lot of time. Thank you!

[vasudev-hv]

Had the same issue. I had created the react app using create-react-app. Fixed the issue by running "npm run eject", and in webpack.config.dev.js, uncomment the following code
require.resolve('webpack-dev-server/client') + '/',
and replace it with
require.resolve('webpack-dev-server/client') + '?http://localhost:3000',
and comment out
require.resolve('react-dev-utils/webpackHotDevClient'),