Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Invariant Violation when rendering using both ReactDOM and ReactDOMServer #8487

Closed
martinkadlec0 opened this issue Dec 2, 2016 · 8 comments

Comments

@martinkadlec0
Copy link

martinkadlec0 commented Dec 2, 2016

Using both ReactDOM.render and ReactDOMServer.render(\w+) causes an invariant violation in React 15.4.1.

See console on https://jsfiddle.net/martinkadlec/jb7bqg5o/4/
There is:

react-dom.js:18121 Warning: Exception thrown by hook while handling onSetChildren: Invariant Violation: Item must have been set
Invariant Violation: Item must have been set
    at invariant (https://unpkg.com/react@15.4.1/dist/react-with-addons.js:5175:15)

Notice that I render completely different components with each of the render methods.

Some criteria have to be met for the warning to show, like at least two nested components.

To me it seems like the ReactDOMServer is messing with itemMap in the regular React and the IDs of components doesn't match.

@aweary
Copy link
Contributor

aweary commented Dec 3, 2016

Thanks for the report @BS-Harou. It looks like its related to ReactDOM and ReactDOMServer are using ReactComponentTreeHook which uses a single Map to store items, so when when one deletes an item it may throw this error if the other tries accessing it.

@gaearon
Copy link
Collaborator

gaearon commented Dec 3, 2016

To be clear it won't crash your code since the error is being caught. But we need to fix it.

@captbaritone
Copy link
Contributor

I have a small reproducible example of this bug. I can create an example repo that triggers it if needed.

@martinkadlec0
Copy link
Author

martinkadlec0 commented Feb 3, 2017

It seems my fiddle stopped working for some reason. @captbaritone go ahead :)

Edit: Fixed mine in the first post as well.

@mrgurdeep
Copy link

@BS-Harou is there any reason you are using ReactDOM.render() twice with same values. I removed one and it solved the warning was removed.

@martinkadlec0
Copy link
Author

@mrgurdeep There is. The internal itemMap object gets "damaged" only after both React and ReactDOMServer render methods are used. So only the next render method called after that tries to use the "damaged" itemMap and triggers the warning.

Note that I don't think it matters whether the second ReactDOM.render is called with the same data as the first one or not.

@gaearon
Copy link
Collaborator

gaearon commented Mar 1, 2017

Looks like we have a fix in #9005—going to merge it once it's rebased, and hopefully get it into 15.5.

@gaearon
Copy link
Collaborator

gaearon commented Apr 13, 2017

It was fixed in 15.5.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants