Runtime error overlay does not disappear when fixed with HMR

[eirikurn]

Is this a bug report?

Yes

Can you also reproduce the problem with npm 4.x?

Yes

Which terms did you search for in User Guide?

Hot module replacement. Error overlay.

Environment

1. node -v: 8.1.4
2. npm -v: 5.3.0
3. yarn --version: 1.0.1
4. npm ls react-scripts: 1.0.13

Then, specify:

1. Operating system: macOS 10.12.6
2. Browser and version (if relevant): Chrome 60

Steps to Reproduce

1. Add hot module reloading by accepting hot changes in src/index.js which re-renders the React app.
2. Add a runtime exception in some React components. (throw new Error()).
3. Open app to see the error overlay.
4. Fix the error in your React component.
5. Wait for webpack to rebuild and look at the app.

Expected Behavior

The error overlay should disappear.

Actual Behavior

The error overlay stays in view. If I close the overlay, I can see the new state of the app, properly fixed.

[eirikurn]

After writing this, I realize that there's no way to know if the runtime error has been fixed and properly replaced with HMR. The HMR could have been a simple css change, unrelated to the runtime error.

Feel free to close if you don't think this is an issue.

[Timer]

What we need to figure out and ensure happens is that a HMR is declined after a runtime error so a full reload is required (and automatic).

Does this sound reasonable to you?

[eirikurn]

Yes, I think that would be a great 80/20 solution.

[gaearon]

Did this work before? I remember that we wanted this to work (force refreshing after any errors) but I'm not sure if it did.

[Timer]

Looks like the code is still there, so I assume it never functioned the way we intended:
https://github.com/facebookincubator/create-react-app/blob/fcb6dc55578e089e9f62f6e6c12cb9b60a57fee5/packages/react-dev-utils/webpackHotDevClient.js#L28-L37

[gaearon]

I wonder if it worked before the refactoring.

[eirikurn]

I saw this issue in the most recent react-dev-utils 3.x and now after upgrading to react-dev-utils 4.

[gaearon]

So it probably worked. We probably broke it in #2515. (cc @tharakawj)

[Timer]

To be sure, can you check if this worked in 1.0.11 @eirikurn?

[eirikurn]

Hm. In both versions, the page does two full refreshes if there's an error during the render (which runs as part of module.hot.accept(...)):

1. I have the page open.
2. Add to the render function of some component window.foo.bar.
3. HMR runs, render fails, page fully reloads, render fails again and finally error-overlay is shown.
4. Fix the issue from step 2.
5. HMR does a full reload and page renders correctly (with no error-overlay).

However, if the runtime error is somewhere else, e.g. in an event handler, the behaviour in the OP appears. No page reloads, overlay stays up.

[Timer]

Ok, so this wasn't a regression. Thanks for the information, @eirikurn!

[Timer]

Fix up in #3098; basically forces a reload after the error overlay has been shown.