Skip to content
This repository has been archived by the owner on Jan 22, 2020. It is now read-only.

Uncaught Error: You're trying to render a component to the document using server rendering but the checksum was invalid. #200

Open
manughuman opened this issue Nov 3, 2017 · 3 comments

Comments

@manughuman
Copy link

manughuman commented Nov 3, 2017

Hello, when I try to reload a page using browser refresh, its failing to load properly and I see below console errors. The only thing I changed is upgraded the react-engine from 3.4 to 4.4 (and corresponding dependencies).

invariant.js:42 Uncaught Error: You're trying to render a component to the document using server rendering but the checksum was invalid. This usually means you rendered a different component type or props on the client from the one on the server, or your render() methods are impure. React cannot handle this case due to cross-browser quirks by rendering at the document root. You should look for environment dependent code in your components and ensure the props are the same client and server side:
(client) 27"><a href="Mongo" data-reactid="28"><h
(server) 27"><a href="Mongo" class="activeNav" da
    at invariant (invariant.js:42)
    at Object._mountImageIntoNode (ReactMount.js:502)
    at mountComponentIntoNode (ReactMount.js:110)
    at ReactReconcileTransaction.perform (Transaction.js:141)
    at batchedMountComponentIntoNode (ReactMount.js:124)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:141)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:60)
    at Object.batchedUpdates (ReactUpdates.js:95)
    at Object._renderNewRootComponent (ReactMount.js:317)
    at Object._renderSubtreeIntoContainer (ReactMount.js:399)
@samsel
Copy link
Contributor

samsel commented Nov 4, 2017

@mgmn looks like your component has changed between the server render and client render

@laurenskling
Copy link

Yes, and as I just found out, React 16 will give you a much better error message!
see #192

@manughuman
Copy link
Author

Thanks @samsel @laurenskling for looking into. But as I said, the only thing I changed is upgrade the "react-engine" from 3.4 to 4.4 and start noticing the error. If I revert it back to 3.4 I do not see any error and my application works fine.

As dependencies for "react-engine" 4.4, I already upgraded "react" to 15.3.2 and that's how I got the above stack. I will try to further increase "react" to 16.0 to see if I get better stack trace.

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

No branches or pull requests

3 participants