I have a checksum error with my isomorphic rendering of an apollo graphQL connected page. How can I view the client markup so that I can debug what the differences are? Any other tips to track down how the rendering is different on the server side vs client-side? When I try to inspect element with Chrome - all I'm getting it seems is the server rendered output so I can't be sure how the client output is differing.
Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) </div></header><div data-reactid="18">Lo
(server) </div></header><div class="Home-root-2IM
The only guess I can make from the truncated warning message is that the Login element is appearing outside of the header (since the only thing on the page that starts with "Lo" is Login).. but I can't be sure that's the right guess because it seems pretty strange. Thus, I'd like to verify with the actual client markup to make sure that is indeed the difference.
I have found that it's useful to increase the amount of surrounding context shown. This can only be done by modifying the code in the react-dom package:
As an aside, patch-package is a very useful tool for making changes to packages in
node_modules
.