Closed laurenskling closed 6 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.
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.
Any chance of help with this? This is really making me step away from React Engine sadly :(
@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
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! 😄
I'm using
React-Engine
backend andwebpack
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:
or tags, even though i'm sure i just made an error in a deeply nested component.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 myAn 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?