Can't get a response from middleware

[ingro]

Hello, I've got this problem trying to use webpack-hot-middlware.

I started a new project from React transform boilerplate but I can't get hot reloading to work.

On the browser I see that the call to http://localhost:3000/__webpack_hmr is made but gets no response, it gets canceled after ~ 20-30 seconds, and then it keep retrying with the same result. The dev tools just shows an empty response.

I'm running node 4.1.2 on Windows 7 x64.

[glenjamin]

Which browser is this? If you try it in a recent version of chrome then you should see some information about the event stream messages.

Does the logging in the server process or the client show any information or errors?

[ingro]

Thanks for the reply @glenjamin , I've tried both with Chrome and Firefox.
Looking at the Chrome Network tab I don't see anything, those are the headers of the request:

Accept:text/event-stream
Cache-Control:no-cache
Referer:http://localhost:3000/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2532.0 Safari/537.36

No response is returned (Failed to load response data).

On the server I told the middleware to log with console.log and I can see just those lines:

webpack building...
webpack built db4696f581c672eac1bd in 1603ms

So it seems that the middleware is running but the client can't connect to it. Looking at the middlware code, if I try to add res.end(); after res.write('\n'); the response reach the client, but as the stream is also closing the reload isn't happening.

[glenjamin]

Can you use cURL to connect to the HMR endpoint? You should see a beating heart emoji 💓 every few seconds.

If not, can you post your full express server setup? It would appear that the middleware isn't getting loaded properly.

[ingro]

Nope, request time out even with curl.

Express setup has ben cloned from this boilerplate, so should be a pretty basic one.

[glenjamin]

I've checked on Node v.4.1.2 with the boilerplate before making any changes - it works as expected. I only have OS X available, so can't vouch for windows.

If you haven't made any changes I'd recommend trying another sample project to see if there are any differences, like this one - https://github.com/glenjamin/ultimate-hot-reloading-example, or the example/ folder included in this repo.

If those work then the issue must be with the boilerplate, if not then I'm stumped.

[ingro]

Tried both, same result.

Guess it could be a problem with my machine, but I don't know where to look to find a solution or what may cause this strange behaviour.

[glenjamin]

Is your browser connecting directly to the stream? Any kind of proxy in the way? We saw a similar issue with #10

[ingro]

Not that I'm aware of, also I don't think it's a browser problem since also curl request times out...

[ingro]

Looking at the server of the example folder of this repo, that's what I see:

::1 - GET /__webpack_hmr HTTP/1.1 200 - - 0.162 ms

But with curl:

curl http://localhost:1616/__webpack_hmr -m 10
curl: (28) Operation timed out after 10015 milliseconds with 0 out of -1 bytes received

[glenjamin]

Weird, here's what it should look like, the cURL request stays open forever (until manually killed).

> time curl localhost:1616/__webpack_hmr -v
*   Trying ::1...
* Connected to localhost (::1) port 1616 (#0)
> GET /__webpack_hmr HTTP/1.1
> Host: localhost:1616
> User-Agent: curl/7.43.0
> Accept: */*
>
< HTTP/1.1 200 OK
< X-Powered-By: Express
< Access-Control-Allow-Origin: *
< Content-Type: text/event-stream;charset=utf-8
< Transfer-Encoding: chunked
< Cache-Control: no-cache, no-transform
< Connection: keep-alive
< Date: Sun, 11 Oct 2015 13:08:43 GMT
<

data: 💓

data: 💓

data: 💓

^C

real    0m36.292s
user    0m0.004s
sys 0m0.006s

> npm start

> webpack-hot-middleware-example@1.0.0 start /Users/glen/Development/GitHub/webpack-hot-middleware/example
> node server.js

Listening on {"address":"::","family":"IPv6","port":1616}
webpack built 8b53317b98740d543088 in 202ms
::1 - GET /__webpack_hmr HTTP/1.1 200 - - 1.877 ms

The log line on the server side doesn't appear until the incoming request has completed.

It might be that 10 seconds is too short - the heartbeat is set to exactly 10 seconds by default. Try either making cURL wait a bit longer, or reducing the timeout setting on the server.

[ingro]

Here it is, with 30 seconds timeout:

curl http://localhost:1616/__webpack_hmr -v -m 30
* Adding handle: conn: 0x21735d0
* Adding handle: send: 0
* Adding handle: recv: 0
* Curl_addHandleToPipeline: length: 1
* - Conn 0 (0x21735d0) send_pipe: 1, recv_pipe: 0
* About to connect() to localhost port 1616 (#0)
*   Trying ::1...
* Connected to localhost (::1) port 1616 (#0)
> GET /__webpack_hmr HTTP/1.1
> User-Agent: curl/7.30.0
> Host: localhost:1616
> Accept: */*
>
* Operation timed out after 30030 milliseconds with 0 out of -1 bytes received
* Closing connection 0
curl: (28) Operation timed out after 30030 milliseconds with 0 out of -1 bytes received

And the server:

λ npm start

> webpack-hot-middleware-example@1.0.0 start D:\Projects\webpack-hot-middleware\example
> node server.js

Listening on {"address":"::","family":"IPv6","port":1616}
webpack built ed1ca8ae2f35ec4b1186 in 183ms
::1 - GET /__webpack_hmr HTTP/1.1 200 - - 0.506 ms

[glenjamin]

That makes no sense! It's acting like something is buffering the response, but nothing should be.

Can you try with a slightly older version of nodejs? Can you also include the full output of npm ls in the example folder?

[ingro]

I can't try it now but I'll do this evening I think. How much older? 4.0 is
fine?

On Sun, 11 Oct 2015 15:24 Glen Mailer notifications@github.com wrote:

That makes no sense! It's acting like something is buffering the response,
but nothing should be.

Can you try with a slightly older version of nodejs? Can you also include
the full output of npm ls in the example folder?

—
Reply to this email directly or view it on GitHub
#36 (comment)
.

[glenjamin]

I'd say try 4.0 and 0.12.

[ingro]

Tried with Node 4.0 and 0.12.7, no luck.
Also, that's npm ls:

λ npm ls
webpack-hot-middleware-example@1.0.0 D:\Projects\webpack-hot-middleware\example
├─┬ express@4.13.3
│ ├─┬ accepts@1.2.13
│ │ ├─┬ mime-types@2.1.7
│ │ │ └── mime-db@1.19.0
│ │ └── negotiator@0.5.3
│ ├── array-flatten@1.1.1
│ ├── content-disposition@0.5.0
│ ├── content-type@1.0.1
│ ├── cookie@0.1.3
│ ├── cookie-signature@1.0.6
│ ├─┬ debug@2.2.0
│ │ └── ms@0.7.1
│ ├── depd@1.0.1
│ ├── escape-html@1.0.2
│ ├── etag@1.7.0
│ ├─┬ finalhandler@0.4.0
│ │ └── unpipe@1.0.0
│ ├── fresh@0.3.0
│ ├── merge-descriptors@1.0.0
│ ├── methods@1.1.1
│ ├─┬ on-finished@2.3.0
│ │ └── ee-first@1.1.1
│ ├── parseurl@1.3.0
│ ├── path-to-regexp@0.1.7
│ ├─┬ proxy-addr@1.0.8
│ │ ├── forwarded@0.1.0
│ │ └── ipaddr.js@1.0.1
│ ├── qs@4.0.0
│ ├── range-parser@1.0.2
│ ├─┬ send@0.13.0
│ │ ├── destroy@1.0.3
│ │ ├─┬ http-errors@1.3.1
│ │ │ └── inherits@2.0.1
│ │ ├── mime@1.3.4
│ │ ├── ms@0.7.1
│ │ └── statuses@1.2.1
│ ├── serve-static@1.10.0
│ ├─┬ type-is@1.6.9
│ │ ├── media-typer@0.3.0
│ │ └─┬ mime-types@2.1.7
│ │   └── mime-db@1.19.0
│ ├── utils-merge@1.0.0
│ └── vary@1.0.1
├─┬ morgan@1.6.1
│ ├── basic-auth@1.0.3
│ ├─┬ debug@2.2.0
│ │ └── ms@0.7.1
│ ├── depd@1.0.1
│ ├─┬ on-finished@2.3.0
│ │ └── ee-first@1.1.1
│ └── on-headers@1.0.1
├─┬ webpack@1.12.2
│ ├── async@1.4.2
│ ├── clone@1.0.2
│ ├─┬ enhanced-resolve@0.9.0
│ │ └── graceful-fs@3.0.8
│ ├── esprima@2.6.0
│ ├── interpret@0.6.6
│ ├── memory-fs@0.2.0
│ ├─┬ mkdirp@0.5.1
│ │ └── minimist@0.0.8
│ ├─┬ node-libs-browser@0.5.3
│ │ ├── assert@1.3.0
│ │ ├─┬ browserify-zlib@0.1.4
│ │ │ └── pako@0.2.8
│ │ ├─┬ buffer@3.5.1
│ │ │ ├── base64-js@0.0.8
│ │ │ ├── ieee754@1.1.6
│ │ │ └── is-array@1.0.1
│ │ ├─┬ console-browserify@1.1.0
│ │ │ └── date-now@0.1.4
│ │ ├── constants-browserify@0.0.1
│ │ ├─┬ crypto-browserify@3.2.8
│ │ │ ├── pbkdf2-compat@2.0.1
│ │ │ ├── ripemd160@0.2.0
│ │ │ └── sha.js@2.2.6
│ │ ├── domain-browser@1.1.4
│ │ ├── events@1.1.0
│ │ ├─┬ http-browserify@1.7.0
│ │ │ ├── Base64@0.2.1
│ │ │ └── inherits@2.0.1
│ │ ├── https-browserify@0.0.0
│ │ ├── os-browserify@0.1.2
│ │ ├── path-browserify@0.0.0
│ │ ├── process@0.11.2
│ │ ├── punycode@1.3.2
│ │ ├── querystring-es3@0.2.1
│ │ ├─┬ readable-stream@1.1.13
│ │ │ ├── core-util-is@1.0.1
│ │ │ ├── inherits@2.0.1
│ │ │ └── isarray@0.0.1
│ │ ├─┬ stream-browserify@1.0.0
│ │ │ └── inherits@2.0.1
│ │ ├── string_decoder@0.10.31
│ │ ├── timers-browserify@1.4.1
│ │ ├── tty-browserify@0.0.0
│ │ ├─┬ url@0.10.3
│ │ │ └── querystring@0.2.0
│ │ ├─┬ util@0.10.3
│ │ │ └── inherits@2.0.1
│ │ └─┬ vm-browserify@0.0.4
│ │   └── indexof@0.0.1
│ ├─┬ optimist@0.6.1
│ │ ├── minimist@0.0.10
│ │ └── wordwrap@0.0.3
│ ├─┬ supports-color@3.1.1
│ │ └── has-flag@1.0.0
│ ├── tapable@0.1.9
│ ├─┬ uglify-js@2.4.24
│ │ ├── async@0.2.10
│ │ ├─┬ source-map@0.1.34
│ │ │ └── amdefine@1.0.0
│ │ ├── uglify-to-browserify@1.0.2
│ │ └─┬ yargs@3.5.4
│ │   ├── camelcase@1.2.1
│ │   ├── decamelize@1.0.0
│ │   ├── window-size@0.1.0
│ │   └── wordwrap@0.0.2
│ ├─┬ watchpack@0.2.8
│ │ ├── async@0.9.2
│ │ ├─┬ chokidar@1.2.0
│ │ │ ├─┬ anymatch@1.3.0
│ │ │ │ └─┬ micromatch@2.2.0
│ │ │ │   ├─┬ arr-diff@1.1.0
│ │ │ │   │ ├── arr-flatten@1.0.1
│ │ │ │   │ └── array-slice@0.2.3
│ │ │ │   ├── array-unique@0.2.1
│ │ │ │   ├─┬ braces@1.8.1
│ │ │ │   │ ├─┬ expand-range@1.8.1
│ │ │ │   │ │ └─┬ fill-range@2.2.2
│ │ │ │   │ │   ├── is-number@1.1.2
│ │ │ │   │ │   ├── isobject@1.0.2
│ │ │ │   │ │   ├── randomatic@1.1.0
│ │ │ │   │ │   └── repeat-string@1.5.2
│ │ │ │   │ ├── lazy-cache@0.2.3
│ │ │ │   │ ├── preserve@0.2.0
│ │ │ │   │ └── repeat-element@1.1.2
│ │ │ │   ├── expand-brackets@0.1.4
│ │ │ │   ├─┬ extglob@0.3.1
│ │ │ │   │ ├─┬ ansi-green@0.1.1
│ │ │ │   │ │ └── ansi-wrap@0.1.0
│ │ │ │   │ ├── is-extglob@1.0.0
│ │ │ │   │ └── success-symbol@0.1.0
│ │ │ │   ├── filename-regex@2.0.0
│ │ │ │   ├── is-glob@1.1.3
│ │ │ │   ├── kind-of@1.1.0
│ │ │ │   ├─┬ object.omit@1.1.0
│ │ │ │   │ ├─┬ for-own@0.1.3
│ │ │ │   │ │ └── for-in@0.1.4
│ │ │ │   │ └── isobject@1.0.2
│ │ │ │   ├─┬ parse-glob@3.0.4
│ │ │ │   │ ├── glob-base@0.3.0
│ │ │ │   │ ├── is-dotfile@1.0.1
│ │ │ │   │ ├── is-extglob@1.0.0
│ │ │ │   │ └── is-glob@2.0.1
│ │ │ │   └─┬ regex-cache@0.4.2
│ │ │ │     ├── is-equal-shallow@0.1.3
│ │ │ │     └── is-primitive@2.0.0
│ │ │ ├── arrify@1.0.0
│ │ │ ├── async-each@0.1.6
│ │ │ ├── glob-parent@2.0.0
│ │ │ ├─┬ is-binary-path@1.0.1
│ │ │ │ └── binary-extensions@1.3.1
│ │ │ ├─┬ is-glob@2.0.1
│ │ │ │ └── is-extglob@1.0.0
│ │ │ ├─┬ lodash.flatten@3.0.2
│ │ │ │ ├─┬ lodash._baseflatten@3.1.4
│ │ │ │ │ ├── lodash.isarguments@3.0.4
│ │ │ │ │ └── lodash.isarray@3.0.4
│ │ │ │ └── lodash._isiterateecall@3.0.9
│ │ │ ├── path-is-absolute@1.0.0
│ │ │ └─┬ readdirp@2.0.0
│ │ │   ├── graceful-fs@4.1.2
│ │ │   ├─┬ minimatch@2.0.10
│ │ │   │ └─┬ brace-expansion@1.1.1
│ │ │   │   ├── balanced-match@0.2.0
│ │ │   │   └── concat-map@0.0.1
│ │ │   └─┬ readable-stream@2.0.2
│ │ │     ├── core-util-is@1.0.1
│ │ │     ├── inherits@2.0.1
│ │ │     ├── isarray@0.0.1
│ │ │     ├── process-nextick-args@1.0.3
│ │ │     ├── string_decoder@0.10.31
│ │ │     └── util-deprecate@1.0.2
│ │ └── graceful-fs@3.0.8
│ └─┬ webpack-core@0.6.7
│   ├── source-list-map@0.1.5
│   └─┬ source-map@0.4.4
│     └── amdefine@1.0.0
├─┬ webpack-dev-middleware@1.2.0
│ ├── memory-fs@0.2.0
│ └── mime@1.3.4
└─┬ webpack-hot-middleware@2.4.1
  ├── querystring@0.2.0
  └─┬ strip-ansi@2.0.1
    └── ansi-regex@1.1.1

[glenjamin]

Thanks.

I'll see if I can reproduce - something somewhere definitely seems like
it's buffering the response packets.

You could try editing the middleware heartbeat code to produce a much
longer heartbeat packet - something around the 1k mark, and see if that
triggers a flush.

If I can't reproduce on OS X I'm not sure what else I can do - I don't know
how to go about debugging something like this on windows.

On 11 October 2015 at 22:35, Emanuele Ingrosso notifications@github.com
wrote:

Tried with Node 4.0 and 0.12.7, no luck.
Also, that's npm ls:

λ npm ls
webpack-hot-middleware-example@1.0.0 D:\Projects\webpack-hot-middleware\example
├─┬ express@4.13.3
│ ├─┬ accepts@1.2.13
│ │ ├─┬ mime-types@2.1.7
│ │ │ └── mime-db@1.19.0
│ │ └── negotiator@0.5.3
│ ├── array-flatten@1.1.1
│ ├── content-disposition@0.5.0
│ ├── content-type@1.0.1
│ ├── cookie@0.1.3
│ ├── cookie-signature@1.0.6
│ ├─┬ debug@2.2.0
│ │ └── ms@0.7.1
│ ├── depd@1.0.1
│ ├── escape-html@1.0.2
│ ├── etag@1.7.0
│ ├─┬ finalhandler@0.4.0
│ │ └── unpipe@1.0.0
│ ├── fresh@0.3.0
│ ├── merge-descriptors@1.0.0
│ ├── methods@1.1.1
│ ├─┬ on-finished@2.3.0
│ │ └── ee-first@1.1.1
│ ├── parseurl@1.3.0
│ ├── path-to-regexp@0.1.7
│ ├─┬ proxy-addr@1.0.8
│ │ ├── forwarded@0.1.0
│ │ └── ipaddr.js@1.0.1
│ ├── qs@4.0.0
│ ├── range-parser@1.0.2
│ ├─┬ send@0.13.0
│ │ ├── destroy@1.0.3
│ │ ├─┬ http-errors@1.3.1
│ │ │ └── inherits@2.0.1
│ │ ├── mime@1.3.4
│ │ ├── ms@0.7.1
│ │ └── statuses@1.2.1
│ ├── serve-static@1.10.0
│ ├─┬ type-is@1.6.9
│ │ ├── media-typer@0.3.0
│ │ └─┬ mime-types@2.1.7
│ │ └── mime-db@1.19.0
│ ├── utils-merge@1.0.0
│ └── vary@1.0.1
├─┬ morgan@1.6.1
│ ├── basic-auth@1.0.3
│ ├─┬ debug@2.2.0
│ │ └── ms@0.7.1
│ ├── depd@1.0.1
│ ├─┬ on-finished@2.3.0
│ │ └── ee-first@1.1.1
│ └── on-headers@1.0.1
├─┬ webpack@1.12.2
│ ├── async@1.4.2
│ ├── clone@1.0.2
│ ├─┬ enhanced-resolve@0.9.0
│ │ └── graceful-fs@3.0.8
│ ├── esprima@2.6.0
│ ├── interpret@0.6.6
│ ├── memory-fs@0.2.0
│ ├─┬ mkdirp@0.5.1
│ │ └── minimist@0.0.8
│ ├─┬ node-libs-browser@0.5.3
│ │ ├── assert@1.3.0
│ │ ├─┬ browserify-zlib@0.1.4
│ │ │ └── pako@0.2.8
│ │ ├─┬ buffer@3.5.1
│ │ │ ├── base64-js@0.0.8
│ │ │ ├── ieee754@1.1.6
│ │ │ └── is-array@1.0.1
│ │ ├─┬ console-browserify@1.1.0
│ │ │ └── date-now@0.1.4
│ │ ├── constants-browserify@0.0.1
│ │ ├─┬ crypto-browserify@3.2.8
│ │ │ ├── pbkdf2-compat@2.0.1
│ │ │ ├── ripemd160@0.2.0
│ │ │ └── sha.js@2.2.6
│ │ ├── domain-browser@1.1.4
│ │ ├── events@1.1.0
│ │ ├─┬ http-browserify@1.7.0
│ │ │ ├── Base64@0.2.1
│ │ │ └── inherits@2.0.1
│ │ ├── https-browserify@0.0.0
│ │ ├── os-browserify@0.1.2
│ │ ├── path-browserify@0.0.0
│ │ ├── process@0.11.2
│ │ ├── punycode@1.3.2
│ │ ├── querystring-es3@0.2.1
│ │ ├─┬ readable-stream@1.1.13
│ │ │ ├── core-util-is@1.0.1
│ │ │ ├── inherits@2.0.1
│ │ │ └── isarray@0.0.1
│ │ ├─┬ stream-browserify@1.0.0
│ │ │ └── inherits@2.0.1
│ │ ├── string_decoder@0.10.31
│ │ ├── timers-browserify@1.4.1
│ │ ├── tty-browserify@0.0.0
│ │ ├─┬ url@0.10.3
│ │ │ └── querystring@0.2.0
│ │ ├─┬ util@0.10.3
│ │ │ └── inherits@2.0.1
│ │ └─┬ vm-browserify@0.0.4
│ │ └── indexof@0.0.1
│ ├─┬ optimist@0.6.1
│ │ ├── minimist@0.0.10
│ │ └── wordwrap@0.0.3
│ ├─┬ supports-color@3.1.1
│ │ └── has-flag@1.0.0
│ ├── tapable@0.1.9
│ ├─┬ uglify-js@2.4.24
│ │ ├── async@0.2.10
│ │ ├─┬ source-map@0.1.34
│ │ │ └── amdefine@1.0.0
│ │ ├── uglify-to-browserify@1.0.2
│ │ └─┬ yargs@3.5.4
│ │ ├── camelcase@1.2.1
│ │ ├── decamelize@1.0.0
│ │ ├── window-size@0.1.0
│ │ └── wordwrap@0.0.2
│ ├─┬ watchpack@0.2.8
│ │ ├── async@0.9.2
│ │ ├─┬ chokidar@1.2.0
│ │ │ ├─┬ anymatch@1.3.0
│ │ │ │ └─┬ micromatch@2.2.0
│ │ │ │ ├─┬ arr-diff@1.1.0
│ │ │ │ │ ├── arr-flatten@1.0.1
│ │ │ │ │ └── array-slice@0.2.3
│ │ │ │ ├── array-unique@0.2.1
│ │ │ │ ├─┬ braces@1.8.1
│ │ │ │ │ ├─┬ expand-range@1.8.1
│ │ │ │ │ │ └─┬ fill-range@2.2.2
│ │ │ │ │ │ ├── is-number@1.1.2
│ │ │ │ │ │ ├── isobject@1.0.2
│ │ │ │ │ │ ├── randomatic@1.1.0
│ │ │ │ │ │ └── repeat-string@1.5.2
│ │ │ │ │ ├── lazy-cache@0.2.3
│ │ │ │ │ ├── preserve@0.2.0
│ │ │ │ │ └── repeat-element@1.1.2
│ │ │ │ ├── expand-brackets@0.1.4
│ │ │ │ ├─┬ extglob@0.3.1
│ │ │ │ │ ├─┬ ansi-green@0.1.1
│ │ │ │ │ │ └── ansi-wrap@0.1.0
│ │ │ │ │ ├── is-extglob@1.0.0
│ │ │ │ │ └── success-symbol@0.1.0
│ │ │ │ ├── filename-regex@2.0.0
│ │ │ │ ├── is-glob@1.1.3
│ │ │ │ ├── kind-of@1.1.0
│ │ │ │ ├─┬ object.omit@1.1.0
│ │ │ │ │ ├─┬ for-own@0.1.3
│ │ │ │ │ │ └── for-in@0.1.4
│ │ │ │ │ └── isobject@1.0.2
│ │ │ │ ├─┬ parse-glob@3.0.4
│ │ │ │ │ ├── glob-base@0.3.0
│ │ │ │ │ ├── is-dotfile@1.0.1
│ │ │ │ │ ├── is-extglob@1.0.0
│ │ │ │ │ └── is-glob@2.0.1
│ │ │ │ └─┬ regex-cache@0.4.2
│ │ │ │ ├── is-equal-shallow@0.1.3
│ │ │ │ └── is-primitive@2.0.0
│ │ │ ├── arrify@1.0.0
│ │ │ ├── async-each@0.1.6
│ │ │ ├── glob-parent@2.0.0
│ │ │ ├─┬ is-binary-path@1.0.1
│ │ │ │ └── binary-extensions@1.3.1
│ │ │ ├─┬ is-glob@2.0.1
│ │ │ │ └── is-extglob@1.0.0
│ │ │ ├─┬ lodash.flatten@3.0.2
│ │ │ │ ├─┬ lodash._baseflatten@3.1.4
│ │ │ │ │ ├── lodash.isarguments@3.0.4
│ │ │ │ │ └── lodash.isarray@3.0.4
│ │ │ │ └── lodash._isiterateecall@3.0.9
│ │ │ ├── path-is-absolute@1.0.0
│ │ │ └─┬ readdirp@2.0.0
│ │ │ ├── graceful-fs@4.1.2
│ │ │ ├─┬ minimatch@2.0.10
│ │ │ │ └─┬ brace-expansion@1.1.1
│ │ │ │ ├── balanced-match@0.2.0
│ │ │ │ └── concat-map@0.0.1
│ │ │ └─┬ readable-stream@2.0.2
│ │ │ ├── core-util-is@1.0.1
│ │ │ ├── inherits@2.0.1
│ │ │ ├── isarray@0.0.1
│ │ │ ├── process-nextick-args@1.0.3
│ │ │ ├── string_decoder@0.10.31
│ │ │ └── util-deprecate@1.0.2
│ │ └── graceful-fs@3.0.8
│ └─┬ webpack-core@0.6.7
│ ├── source-list-map@0.1.5
│ └─┬ source-map@0.4.4
│ └── amdefine@1.0.0
├─┬ webpack-dev-middleware@1.2.0
│ ├── memory-fs@0.2.0
│ └── mime@1.3.4
└─┬ webpack-hot-middleware@2.4.1
├── querystring@0.2.0
└─┬ strip-ansi@2.0.1
└── ansi-regex@1.1.1

—
Reply to this email directly or view it on GitHub
#36 (comment)
.

[ingro]

Just a quick update: this morning I tried it on my computer at work, which also runs on Win 7 x64, and hmr runs with no problem, so it's not a general Windows problem...

[spirAde]

Same issue.
time curl localhost:3000/__webpack_hmr -v returns the data: 💓, and I see recompiled bundle in terminal, when change a code, but the EventStream tab for __webpack_hmr is empty.

[glenjamin]

If you're seeing the heartbeat in cURL and the reload event in the console, that's a slightly different issue. Can you report in a separate thread with details of your environment?

[spirAde]

Thanks for the reply @glenjamin, I'll write later

[NeXTs]

@spirAde Did you solved your problem?
I'm trying to set up webpack-hot-middleware on VMWare and experience same issue.
localhost:3000/__webpack_hmr returns 💓
but
localhost/__webpack_hmr request fails with "Fail to load response data"

I thought that specifying 3000 port in config's path parameter will be alike workaround, but such syntax is not supported :(

[jgoux]

Hello, I have the same issue.
I'm running node.js inside a VM on 0.0.0.0:3000
The content is served on localhost:3000 but the localhost:3000/__webpack_hmr isn't loaded (timeout).
I'm on Chrome version 46.0.2490.86 and Windows 8.1

[glenjamin]

Can you post your webpack config? Does the curl example above work?

[jgoux]

@glenjamin My webpack config is the one from https://github.com/gaearon/react-transform-boilerplate , I just cloned the project and tried to run it.
I can see the heartbeat from both my VM and my host machine with the curl command.
The webpack bundle is also compiled and served on my host.
The calls to http://localhost:3000/__webpack_hmr from the web client all fail. Here is the header sent from Chrome (I also tested with Mozilla Firefox, same issue) :

Request URL:http://localhost:3000/__webpack_hmr
Request Headers
Provisional headers are shown
Accept:text/event-stream
Cache-Control:no-cache
Referer:http://localhost:3000/
User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36

[ustccjw]

YES, http://localhost:3000/__webpack_hmr will be pended for about some minutes.

[ustccjw]

My problem was caused by http proxy.

[skolmer]

I have the same issue on Win10 x64

[jackgeek]

I also have same issue on Win10 x64

[skolmer]

my config is the one from https://github.com/gaearon/react-transform-boilerplate. no nginx only webpack-dev-server.

[glenjamin]

This definitely seems to affecting mainly windows, everyone who's managed to resolve this issue has identified some sort of MITM that's buffering or blocking responses.

The steps to debug are:

• Try a boilerplate that's known to work for others
• Check that you can see the incoming request in the server logs
• See if you can connect to the event-source endpoint via cURL and receive data

If you can connect with cURL, there's something messing with the transport when being used in the browser

If you can't connect with cURL, there's something messing with the server's data.

[skolmer]

I tried to curl the request but didn't get a response from the middleware.
I will look for other configurations that might affect the event-stream but currently out of ideas where to look. I didn't have this issue with the old react-hot-boilerplate project that was using Webpack Dev Server.
Strange is, a colleague of mine had the exact same project running on his win10 machine.

[pablolmiranda]

In my case when I removed the express compression middleware the event source started to receive messages again.

[davidhouweling]

And i am experiencing the issue as well. Windows 10, 64bit. Chrome v47. Similar to others, cloned the template too. Tried on node 4.1.1 and 5.4.1. I can confirm that curl'ing the url does result in the heartbeat. I do agree that something is most likely buffering the response. Connected/disconnected from VPN still results in the same issue. I don't have a proxy set up either.

[davidhouweling]

To add to my last comment, i did curl with -v... and the first couple of connects it attempted to do resulted in 'port 3000 failed: bad access', but it was trying different IP addresses on my machine. On the 4th attempt it resolved to my machine. It was as if it cycled through the different possible network bridges on my machine before finally resolving to one. Though I'm not sure if that is just curl, or if it shows a wider issue on how the request is attempting to get resolved.

[davidhouweling]

For those who copied the configuration from react-transform-boilerplate (@ingro, @NeXTs, @jgoux @ustccjw, @skolmer, @jackgeek, @tkh44) and had the issue, take a look at my pull request to react-transform-boilerplate which solved it for me.

[skolmer]

The solution in my case was to add "eventsource-polyfill" to the webpack entry points.
In react-transform-boilerplate it is described as requirement for IE but in my case it fixed HMR in Firefox and Chrome too.

[skolmer]

To add to my last comment. It seems that Bitdefender is somehow buffering the server sent events and breaking HMR. Uninstalling Bitdefender or using the eventsource-polyfill is the solution if you have Bitdefender AV installed.
http://stackoverflow.com/a/30626490/1787868
http://forums.asp.net/post/5315602.aspx

[sharpoverride]

@davidhouweling Awesome, I've verified it on my machine with Sophos installed and it works.

Thank you.

[owieboy]

Removing the localhost binding did not work for me.
I'm using Chromium Version 44.0.2403.89 Built on Ubuntu 14.04, running on LinuxMint 17.2 (64-bit)
I tried running 0.12 and 4.2

[dclowd9901]

Seeing this as well for our exceptionally large build

[glenjamin]

Size of build is fairly unlikely to be the problem.

The things to check are noted in #36 (comment)

[dclowd9901]

@glenjamin the problem is that the heartbeat response times out. It seems as though the browser isn't "beating" quickly enough to prevent the timeout, which seems to be a downstream effect of locking during the compilation phase. I don't know enough about the particulars of the event loop and its effect on the heartbeat during processing, but the two don't seem mutually exclusive.

I'm not on windows, and there's no MITM running (unless IT installed something without my knowledge, certainly possible, but they don't seem to know anything about it either).

[glenjamin]

@dclowd9901 ah, I see - that must be a pretty long compile time! The simplest fix is to change the timeout setting to be longer.

[dclowd9901]

Is there a flag that I can pass through webpack-dev-server to change that? One didn't immediately pop out at me as I was browsing the code (I did see something that looked like a debounce timeout)

[glenjamin]

@dclowd9901 Try increasing timeout as specified here: https://github.com/glenjamin/webpack-hot-middleware#config

That setting is how long the browser waits for a heartbeat before giving up.

[lytc]

I have the same issue with Vagrant/nginx proxy. Try to use Websocket instead of EventSource and it work https://github.com/lytc/webpack-hmr

[singggum3b]

I'm running a server in vmware and experienced the same problem when connect from the host machine.
It's work just fine when connect from the vm.
Strangely when i use ultimate-hot-reloading-example. i can connect normally.
Then i tried to isolate the problem , if i remove the devtool: '#eval-source-map', or

import React from 'react';
import ReactDOM from 'react-dom';

it stopped working. 😱 . Still can't figured what went wrong though.
I also have bitdefender installed.

[ywmail]

I can get the [HMR] connected in chrome dev tool, but no other info after a file compiled.
I have two webpack compiler tasks.
# webpack.dev.js:

    const hotMiddlewareScript = 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true';

    entry: {

      'polyfills': ['./src/' + app + '/polyfills.browser.ts', hotMiddlewareScript],
      'vendor': ['./src/' + app + '/vendor.browser.ts', hotMiddlewareScript],
      'main': ['./src/' + app + '/main.browser.ts', hotMiddlewareScript]

    },

# server.js:

let telcoConfig = require('./config/webpack.dev')({ env: 'development', app: 'telco' });
let marketplaceConfig = require('./config/webpack.dev')({ env: 'development', app: 'marketplace' });
let configs = [telcoConfig, marketplaceConfig];

let compiler = webpack(configs);

let express = require('express');
let middleware = require('webpack-dev-middleware');
let app = express();

// Dev Server
configs.forEach(function (config) {
  app.use(middleware(webpack(config), {
    publicPath: config.output.publicPath
  }));
});

// Enables HMR
app.use(webpackHotMiddleware(compiler, {
  log: console.log, path: '/__webpack_hmr', heartbeat: 10 * 1000
}));

let server = app.listen(18088);

[glenjamin]

You need to make sure you're using the same compiler instance for both dev-middleware and hot-middleware.

In the example above you create an extra one.

[glenjamin]

There is a way to have more than one config on the same compiler instance, but I've not used it myself - if you look through the closed issues / pull reqs you might find a useful example.

[ywmail]

Thanks @glenjamin , I fixed the problem follow your instructions.

// Dev Server
configs.forEach(function (config) {
  let compiler = webpack(config);
  app.use(middleware(compiler, {
    publicPath: config.output.publicPath
  }));

  // Enables HMR
  app.use(webpackHotMiddleware(compiler, {
    log: console.log, path: config.output.publicPath + '__webpack_hmr', heartbeat: 3 * 1000
  }));

});

[kirkstrobeck]

I am on a mac, using express, node 7.0.0, yarn, and here are my deps. I am able to recreate this issue.

Server looks like

app.use(require('webpack-hot-middleware')(compiler));

When curling it I only get one heartbeat, then

curl: (28) Operation timed out after 10016 milliseconds with 20736 bytes received

SOLVED

Looks like the hmr was working fine, but the react-transform-hmr in my .babelrc was specified under an environment and was not being properly set, so console.log statements went thru, but not jsx revisions.

[smukkekim]

The problem for me turned out to be my antivirus - BitDefender Internet Security.
Upgrading to BitDefender 2017 resolved the issue...

[Doeke]

Bitdefender antivirus was blocking requests to http://localhost:8080/__webpack_hmr for me as well, fixed it by turning of real-time protection shield.