Create-react-app: [V4] Fast Refresh should dismiss runtime errors

[gaearon]

1. Type foo.bar() inside a component
2. See runtime error overlay
3. Change that to foo.baz() and save

Expected: see the foo.baz() error overlay instead.
Actual: keep seeing the foo.bar() overlay with the new error being "added" (the screen says 1 of 2 errors).

In other words, when we do a Fast Refresh, we should always be dismissing the runtime overlay first.

This is because the previous error is stale by the time you save the code and likely irrelevant.

[gaearon]

I think maybe this function needs to dismiss the runtime ones?

https://github.com/facebook/create-react-app/blob/025f2739ceb459c79a281ddc6e60d7fd7322ca24/packages/react-dev-utils/webpackHotDevClient.js#L182

[ianschmitz]

Had trouble reproducing on master. It appears to work as intended when following your repro steps (overlay only shows latest error). Maybe i missed something.

[n3tr]

@ianschmitz

Here is how to reproduce the issue - https://recordit.co/gqVKssNvhW

Actually, You can simply do

• Type {foo} and save
• Change to {.} and save
• Remove then save

[n3tr]

@gaearon @ianschmitz

I spent a day debugging this issue and managed to make it work, But the thing is, I can't tell what the issue is. 😓

I have found that somehow calling hot.check causes a runtime error even the last message from the socket is ok.

So what I have done is just made it calls tryApplyUpdates when receiving a hash event instead of waiting for an ok event, which will come shortly after the hash event (https://github.com/webpack/webpack-dev-server/blob/v3.11.0/lib/Server.js#L981-L989), and It solves this issue.

(I assumed that calling handleSuccess twice might make the second call dismiss the error overlay. But it is not true, actually calling handleSuccess on the hash event doesn't generate an error at all)

I have also looked at next.js's dev-client, which has a similar implementation, but it doesn't have this issue. 🤔

It would be nice If someone can point me to where I should take a look more to understand how things work behind 🙏🏼 .

(drafted PR: https://github.com/facebook/create-react-app/pull/9972)

---

I also encountered another issue while debugging this, Sometimes changes don't get applied when component code got updated. It is intermittent but happens from time to time.