Don't trigger module reloading when there were errors generating the bundle. about webpack-dev-server HOT 12 CLOSED

You could try the bail option, but I'm not sure if that works...

from webpack-dev-server.

According to the code the app is refreshed when there were warnings, but not refreshed when there were errors. @sokra SyntaxErrors for instance are errors?

from webpack-dev-server.

I'm not using live.js (I think I'm not). I'm using index.js (webpack-dev-server/client) according to this tutorial:
http://gaearon.github.io/react-hot-loader/

When an error occurrs (eg. I remove a comma to create a SyntaxError in a jsx file) the bundling on the server fails (ERROR), then the client is triggered and it looks like it tries to compile, then fails, then reloads the whole page which results in a server error for me because it uses the same code (server side rendering).

from webpack-dev-server.

I tried commenting out the reloadApp lines in index.js:
https://github.com/webpack/webpack-dev-server/blob/master/client/index.js#L30
https://github.com/webpack/webpack-dev-server/blob/master/client/index.js#L38

Now it doesn't reload the app, but then the next time that the compile is successful, it reloads the whole page instead.

Ideally, the server should just not notify the client so that the client can do a successful hot reload.

from webpack-dev-server.

Or maybe I'm misunderstanding something.
It looks like that should have done it .. I don't know why it's reloading the whole page on success instead though.

from webpack-dev-server.

Alright, after looking at the code, it looks like the hot update is aborted in the client due to an "Aborted because of bubbling" Error

at:
https://github.com/webpack/webpack/blob/master/lib/HotModuleReplacementPlugin.js#L388

which leads to a full page reload here:
https://github.com/webpack/webpack/blob/master/hot/dev-server.js#L6

(updated:)

• It looks like the code there looks up each outdated module's parents and in this case it bubbles up to the root moduleId 0 causing a whole page reload. Not sure what can be done.
• It seems like the hot updates include versions where 1. the module didn't build successfully so it is declared as missing, then 2. the module built successfully so the new successfully built module is sent.
• Some further digging ... HotModuleReplacementPlugin plugs in to Compilation's "record" and "additional-chunk-assets" hooks to save the updated modules. However it doesn't do anything differently for failed modules, so it just sends the 'module missing' stub for failed modules. Ideally it should just skip failed modules. I don't know how that could be done though. Compilation has a "failed-module" hook which might be useful for this.

I think this is an important issue for making hot module reloading useful in real world usage, as otherwise to take advantage of it you'd have to be careful to save only when everything is correct. If you don't it will just reload the whole page - thus no hot reloading.

from webpack-dev-server.

Success!! After a lot of trial and error and digging, I've got it to work so that failed modules don't cause the page to reload and when they stop failing they successfully do a hot reload.

Steps:

1. Commenting the reloadApp lines in index.js (or maybe just for errors):
   https://github.com/webpack/webpack-dev-server/blob/master/client/index.js#L30
   https://github.com/webpack/webpack-dev-server/blob/master/client/index.js#L38
2. In HotModuleReplacementPlugin I plugged in to the 'failed-module' hook and set a failed flag if it ever got in there. Then in the record, after-hash, and additional-chunk-assets hooks I check if the failed flag is set. If it is I do nothing (return immediately).

One case that this might not handle is if there was more than 1 module updated at the same time with one failing and one succeeding. The succeeding module's update might get lost (or not I'm not sure). But I think this should be rare as it would require quickly editing more than one module file so they get picked up in the same compilation by the watcher .. which might be possible (or not).

@sokra, if this is good enough I can prepare a pull request.

from webpack-dev-server.

@chanon We need to add a webpack mode that doesn't emit any asset and don't change the records when an error occur.

from webpack-dev-server.

@sokra We had this more than once, but I'd expect webpack to not output anything when an error occurred 😀

from webpack-dev-server.

👍 Have encountered this issue (using react-hot-loader).

Forgive my ignorance (perhaps it has been discussed already). I do love the build errors showing up in the console (instead of only in the terminal) and if they could remain it would be awesome, but obviously not a deal-breaker (perhaps webpack/webpack#416 could be a long-term solution?).

from webpack-dev-server.

(From discussion at webpack/webpack#418, also adding here for reference.)

I'm presenting the commits/diffs that I made which result in perfect hot module reloading behavior where syntax errors do not cause any problems and once they are fixed changes continue to update instantly all without full page reloads.

The first commit is a very simple one:
https://github.com/chanon/webpack-dev-server/commit/1c0fdb2a6c99ff37ae27b3ad3e9ca26855764d1e#diff-895656aeaccff5d7c0f56a113ede9662R39

It simply removes the reloadApp() call when there is a module compile error in client/index.js. This mirrors the behavior in live.js which doesn't reload on errors too. It fixes the full page reloads that occur whenever a module of any type fails when using client/index.js.

The second commit is in the HotModuleReplacementPlugin
https://github.com/chanon/webpack/commit/57018bfb6b14b8d40e7df923311dd9d6bdcc350b

Here I listen to the 'failed-module' hook, if the compile failed then don't report the module changes to the client. This fixes the issues where hot reloading doesn't work after compilation failed and then later succeeds.

from webpack-dev-server.

Is it still possible to activate app reloading? While I don't use it in desktop browsers, it comes in handy with mobile devices.

from webpack-dev-server.