4.5.1 - Objects are not valid as a React child

[deftomat]

Description

We have the following component:

export default function Component({ visible }) {
  if (!visible) return null;
  return <div>some content</div>;
}

Initially, when you arrive on a page, visible is false. So, component will render nothing.
Later, when visible change to true, some content should be rendered.

Expected behavior

Should show/hide content based on props.

Actual behavior

Changing visible to TRUE throws the following error:

Error: Objects are not valid as a React child (found: object with keys {props, context, refs, updater, __reactstandin__proxyGeneration, __reactstandin__cachedResult}). If you meant to render a collection of children, use an array instead.

Possible workarounds:

• Replace if (!visible) return null with if (!visible) return <div />
• downgrade to 4.3.*

Environment

React Hot Loader version: 4.5.1
React version: 16.6.3
React DOM version: 16.6.3

[theKashey]

This is 4.5.0 change.

By default configuration, SFCs are wrapped by a complex thing, which returns a class instance from SFC call(it's a long story). This "conversion" could be done only once, during the first component render. Later would lead to an error.

4.5.0 adds "early reject" if render return null. And later returns class wrapper, when it's already too late.

For now, you can solve this by setting pureSFC configuration option. See readme for details.

[theKashey]

Should be fixed in 4.5.2

[deftomat]

Thanks! Looks like it works.