New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
lilianammmatos opened this Issue Sep 30, 2015 · 5 comments

Comments

Projects
None yet
4 participants
@lilianammmatos

lilianammmatos commented Sep 30, 2015

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!

@alexfedoseev

This comment has been minimized.

alexfedoseev commented Oct 16, 2015

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.

@alexfedoseev

This comment has been minimized.

alexfedoseev commented Oct 27, 2015

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

@chanon

This comment has been minimized.

chanon commented Nov 15, 2015

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

This comment has been minimized.

lilianammmatos commented Nov 16, 2015

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

This comment has been minimized.

blainegarrett commented Apr 22, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment