search

catamphetamine / webpack-isomorphic-tools

Server-side rendering for your Webpack-built applications (e.g. React)
MIT License
1.25k stars 48 forks source link

"React attempted to reuse markup in a container but the checksum was invalid" when using require.ensure #86

Closed olalonde closed 8 years ago

olalonde commented 8 years ago

When using require.ensure, in a react-router route for example, the call will be sync on server side and the page will render properly. However, when on the client side, the first render doesn't have access to the modules required by require.ensure since that call is async and I therefore get the following error in my console.log:

warning.js:44Warning: 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) <!-- react-empty: 1 -
 (server) <div class="root" dat

One way to fix this would be to include the chunks as part of the html rendered on the server but it seems the chunk files do not appear assets.javascript.

I was wondering what solution you would recommend for that problem and if there's any way webpack-isomorphic-tools could be modified to support that use case. I'd be happy to help implement it if we agree on a solution.

olalonde commented 8 years ago

Oh nevermind, running match() on my routes before doing the first render solved the issue for me. Thanks to https://github.com/reactjs/react-router/issues/2036#issuecomment-154561879