Pre-rendered placeholders differ on client causing React to re-inject markup

[lilianammmatos]

Hello @sokra !

I am successfully able to use local css classes on both the client and server. However, the classes differ. This causes React to re-inject new markup i.e. losing many of the benefits of server rendering. I get the following error from my React component:

Warning: React attempted to reuse markup in a container but the checksum was invalid:
 (client) class="uIcon-style__icon___uQ7KH ..."
 (server) class="uIcon-style__icon___1PjTP ..."

I am following the guidelines for webpack configs on the server and client outlined in your comment from another issue: #59 (comment)

I also found this very problem referenced in a comment from an issue from your react-starter repo: webpack/react-starter#69 (comment)

Unfortunately, I could not find any documentation to resolve this problem. Is there a way to resolve this or is this still an ongoing issue?

Thanks!

[alex35mil]

Faced the same warning.

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) ss="Dummy__wrapper__3B39g" data-reactid=
 (server) ss="Dummy__wrapper__21fA5" data-reactid=

If it's not ongoing, I can create repo reproducing the issue.

[alex35mil]

Looks like it's fixed. Warning is gone after update.

[chanon]

If your hash is different, try including [path] to your localIdentName. For me, after doing that I saw that the path for each was different and was able to fix it by setting a context property on the webpack configs.

[lilianammmatos]

Thanks for the suggestions! I had the context property set on both configs, but they were not pointing to the same directory. Once I made them point to the same place, the warning went away for me. h/t to @jrdrg for the tip. Closing issue.

[blainegarrett]

@chanon Thank you thank you! I ran into this on webpack 2 upgrade. Scratching my head for a while.