transformFlowNode does not skip null children, causing TypeError in hotReplacementRender

[Jessidhia]

Description

What you are reporting: Hot reloading not working

Expected behavior

What you think should happen: Edited components should update

Actual behavior

What actually happens: React-hot-loader: reconcilation failed due to error TypeError: Cannot read property 'type' of null

Environment

React Hot Loader version: 4.1.1

Reproducible Demo

I've not been able to make one, but this is what the result of render(instance) looks like, before it goes through to transformFlowNode:

The actual crash happens later, on the if (_typeof(child.type) !== _typeof(stackChild.type)) check, because child (the 3rd item in the React.Fragment) is null.

The component that produces this tree that ultimately crashes is completely unrelated to the component that I updated to trigger the hot reload; other than sharing a distant parent component.

---

I believe the fix will be to also pass the node.props.children inside transformFlowNode through filterNullArray, but I'm not sure it is that easy. This avoids the crash, but I still get an unable to merge warning inside a React.createContext Provider, and the edited component's rendering is not updated unless I trigger its state to change through other means. 🤔

[theKashey]

Real detective! Look like condition render in Fragment could break everything.

[theKashey]

Actually here we got two bugs.
SFC inside Context might not be "force" updated, as long there is no command to do it. The test I have actually testing Stateful component, the one I could update.

[gregberge]

@theKashey it looks like you fixed it? Isn't it?

[theKashey]

@neoziro - yep, now it is fixed.

[timneutkens]

This still happens when using Next.js: vercel/next.js#4299

The latest version of react-hot-loader does fix the error when using Fragments though.

[theKashey]

So just in time.

[timneutkens]

@theKashey seems like there’s still an issue where the component gets remounted after componentdidupdate and returning null in render. Do you have any idea how to fix that? I’m checking it out myself too, but you’re definitely more known with the codebase

[theKashey]

Could you elaborate more, or provide some example?
Theoretically, anything with "didUpdate", as something that will be triggered after RHL did its job, shall not affect anything.
Feel free just open a PR with a new test failing, and ask me to fix it :)