Webpack-hot-middleware: Should handle when app server is reloaded via nodemon

[mcmire]

I have it so that my app server (which, of course, contains webpack-dev-middleware and webpack-hot-middleware) is restarted when any server-side files are changed. Unfortunately, what's happening is that as soon as the server is restarted, something is triggered such that now I see the following message in the browser console:

GET http://localhost:3000/__webpack_hmr net::ERR_INCOMPLETE_CHUNKED_ENCODING

I don't know enough to know why this is happening exactly, but I do know that I'd like the page to reload when this happens. Any idea on how to do this?

[glenjamin]

Using nodemon with webpack dev builds will always cause this, because nodemon does a hard exit which shuts down the process forcibly.

I don't recommend restarting the whole process like this, as you'll lose the webpack in-memory cache and the next build will take much longer.

[glenjamin]

You should at least configure nodemon to ignore the client folder, so that it only restarts on server changes.

The client-side event-stream should reconnect after the server has restarted.

Feel free to reopen if you have more questions or suggestions.

[glenjamin]

I've expanded my sample application to show a way of reloading express routes without restarting the whole process:

https://github.com/glenjamin/ultimate-hot-reloading-example

[mcmire]

@glenjamin Yeah... that makes sense. That repo is so helpful. I'm going to have to mess with my environment for the fifth (!!) time but this is really great, thanks so much.

[jwdomingo]

Hello @glenjamin, I was wondering if it is possible to prevent webpack-hot-middleware/webpack-dev-middleware from rebuilding every time I save any server-side files. I am also using nodemon to watch my server code.

Thank you for the help!

[glenjamin]

It's not possible, as nodemon restarts the whole process, so you lose anything webpack was remembering.

You might be able to get some speed ups after a restart from configuring webpack to cache it's files on disk instead of in memory, but I've never tried this.

My preferred way to handle server code reloading is as shown in the ultimate example: keep the server running, and reload the root route handler

[waynecz]

Hi @glenjamin, I am reading your application: https://github.com/glenjamin/ultimate-hot-reloading-example , it's awesome!
But I can't understand how the "Server-side express routes hot reloading" works, it seems not the nodemon's effect?

Thanks a lot if can get your help！

[glenjamin]

But I can't understand how the "Server-side express routes hot reloading" works, it seems not the nodemon's effect?

Correct, the key point is here: https://github.com/glenjamin/ultimate-hot-reloading-example/blob/master/server.js#L28
Every request does a require(), which will use the require.cache if primed, or trigger a fresh require.

Whenever the /server/ files change, we clear the module cache: https://github.com/glenjamin/ultimate-hot-reloading-example/blob/master/server.js#L37

[s2t2]

If anyone has time and interest, I could use help troubleshooting an adaptation of this lesson in my project (reference only the _mongo-deploy-react-hot_ branch). Basically, when react components are modified, the hot reload works as expected, but whenever non-react files are changed, the same error appears:

GET http://localhost:3000/__webpack_hmr net::ERR_INCOMPLETE_CHUNKED_ENCODING

Here is a link to the project's express server, where I believe the problems lie.

[glenjamin]

That error means the server has ended the connection. It could be avoided if we did a clean shutdown of the event source connection, but I don't think it's important.

Continuing hot reloading after a server restart is trickier, I think it might work if you configure Dev middleware to write to disk instead of memory, but that is outside the scope of this module

[s2t2]

i guess maybe the lesson is to not use nodemon in development in conjunction with hot module replacement?

[glenjamin]

It's probably possible, but not something I've tried - I use the strategies demonstrated in the "ultimate hot reloading example" linked above.

[ezekielchentnik]

Here is the solution to this: run webpack middle ware on a seperate express server. You can then restart your main express server without re executing the middleware/compiler. here is a gist https://gist.github.com/ezekielchentnik/ed0cabb09bf29e5b4a7a461a11b1c63d - I also use piping instead of nodemon. all works like a charm

[richardscarrott]

@glenjamin I built webpack-hot-server-middleware to help with this problem which allows you to hot reload your server bundle without having to use nodemon.

It's also a slightly different approach to your ultimate hot reloading example (it won't hot reload non-bundle assets like express routes for example) but I've found it to work really nicely along side webpack-dev-middleware and webpack-hot-middleware.