search

paypal / react-engine

a composite render engine for universal (isomorphic) express apps to render both plain react views and react-router views
Apache License 2.0
1.45k stars 130 forks source link

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

Open manughuman opened 6 years ago

manughuman commented 6 years ago

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 commented 6 years ago

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

laurenskling commented 6 years ago

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

manughuman commented 6 years ago

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.