Objects are not valid as a React child after upgrading react-stand-in from 4.0.0-beta.13

[JounQin]

Moved from theKashey/react-stand-in#2

Description

What you are reporting: Bug

Expected behavior

What you think should happen: do not throw error

Actual behavior

What actually happens:

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.null
    at invariant (invariant.js:42)
    at traverseAllChildrenImpl (react.development.js:805)
    at traverseAllChildren (react.development.js:833)
    at Object.countChildren [as count] (react.development.js:945)
    at doTraverse (index.js:84)
    at doVisit (index.js:116)
    at index.js:172
    at new Promise (<anonymous>)
    at reactTreeWalker (index.js:70)
    at mapper (index.js:88)

Environment

React Hot Loader version: 4.0.0-beta.18
react-stand-in version: >= 4.0.0-beta.14

Run these commands in the project folder and fill in their results:

1. node -v: v9.4.0
2. npm -v: 5.6.0

Then, specify:

1. Operating system: macOS
2. Browser and version: Chrome 64

Reproducible Demo

https://github.com/JounQin/react-ssr/tree/react-stand-in

Branch: react-stand-in

For now, I'm locking [email protected], you can remove resolutions in package.json and run yarn && yarn dev, then visit http://localhost:4000.

[theKashey]

Strange. I know the source of error, but it should not happens.

[theKashey]

This is not RHL's bug, this is bug from react-tree-walker from react-async-bootstrapper from react-async-component.
It just can't digest a valid React construction we produce.

[theKashey]

Closing this issue for now. Sorry, but there is no way to use a current version of react-hot-loader with a current version of react-async-component.

[SleepWalker]

@theKashey, the error is here:

https://github.com/ctrlplusb/react-tree-walker/blob/master/src/index.js#L78

It uses react Children API. So ProxyComponent is not a valid Component for react. A valid react element should have .$$typeof property. This is the thing, react validates in Children.count method:

https://github.com/facebook/react/blob/b77b12311f0c66aad9b50f805c53dcc05d2ea75c/packages/react/src/ReactChildren.js#L124-L128

It can not determine, that this is a react element and tries to proceed with iteration, which is not possible.

Or do you mean, that ProxyComponent should not appear in React tree as a child and react-tree-walker improperly traverses that tree?

[theKashey]

@SleepWalker - the problem is simple - we are returning an instance from functional stateless component to work out Relay(it will also break async-loader) - see #775

We tried to solve this in #833, but decided not to solve it in that way.

It is better to fix tree-walker, and I've raised an issue for it. It is literally one line code change.

[SleepWalker]

Thank you for detailed info @theKashey!