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

React mounting checksum error doesn't show actual error #192

Closed laurenskling closed 6 years ago

laurenskling commented 7 years ago

I'm using React-Engine backend and webpack on the frontend (https://github.com/paypal/react-engine/blob/master/example/webpack.config.js) that uses mounting (https://github.com/paypal/react-engine#usage-on-client-side-mounting).

If I get a checksum error (we've all seen it before: 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) ... (server) ....) it never shows at (client) (server) the actual div/span/element where the error is. Mostly it just shows my or tags, even though i'm sure i just made an error in a deeply nested component.

An easy error to create is {new Date().toString()}, this will (mostly) render something different on server and client.

Is this because of the single line html string ReactEngine creates on the backend?

jonathansamines commented 7 years ago

@laurenskling I have gotten that error previously. The reason is the "new Date()", and happens when the server and the client have different timezones configuration, which causes the server generate a different DOM than the client does, which leads to the warning you are getting.

laurenskling commented 7 years ago

I know that's why I created this example error :) my ticket is about the checksum error not giving me the actual code where the error is happening on.

laurenskling commented 6 years ago

Any chance of help with this? This is really making me step away from React Engine sadly :(

samsel commented 6 years ago

@laurenskling react-engine is just executing the bootstrapping and the error that you've pasted is directly from react and its not a side effect of using react-engine

laurenskling commented 6 years ago

I just upgraded to React 16, which has better handling of the checksum error, so now it will tell me: "Warning: Expected server HTML to contain a matching text node for "Sat Nov 04 2017 16:17:37 GMT+0100 (CET)" in ." 🌈

Having checksum errors (which is not quite uncommon while developing) is an absolute pain with React Engine and React 15. I would advice everyone to get to React 16 as soon as possible and enjoy coding again! 😄