Markup generated on the server was not what the client was expecting
Opened this issue · 2 comments
Hi when I run nicistore locally, although the app started in the server and is accessible to client, I got following console error in the client when accessing any page.
I am not sure if the issue is related but the responsive styling/css is loaded noticeably late (after around 2 sec) after the plain html because of which the UX is effected.
I was wondering what might have cause the issue for me locally as both the above issue is not present in nicistore.com.
Please let me know if you have any idea on it.
Error message on JS console is as following:
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) bv5gxs.5.1.0.1.0.1"> <span data-r
(server) bv5gxs.5.1.0.1.0.1"> <span d
@nash90 that is a "warning", right?
It just means that when React started on the client it noticed that the markup that should be rendered is different from the one the server returned and re-renders the DOM.
You'll notice this a lot when you change some component, don't restart the isomorphic server and refresh the page. What happens is, since you didn't restart the server, it has the old component code and, thus, will render it on the server but, when react starts on the client and it runs the Virtual DOM with latest component code and notices that the component is not rendered as it should and updates it, throwing that warning.
In development I know that there's one warning that keeps popping up... I think (not sure) that it had something to do with the Intl polyfill and the way the server-side and client-side polyfills work and, especially, handle prices/currency... Have to confess I just let it there because didn't consider it would have any bad impact :)
@andreftavares Thanks for the information.