baugarten
commented
8 years ago I'm seeing this too. Specifically, I'm seeing it when using the server side rendering with hot reloads of react components.
I have tried restarting the node server.js process and reloading the page. The only thing that rectifies the problem is running webpack -- this works without requiring a server restart.
In my case, it seems that the client has the old version, and then when I do a refresh the server uses the new version of the code but the client is still served the old one. It appears that my public/js/bundle.js file is not being overwritten by the process (I don't know if this is expected), so it would make sense that the client is still rendering the old version (until I run webpack).
Once I run webpack and refresh the page, then the client has the new version and the server has the new version.
I think that the problem is that in the order of express middleware, by default the static middleware is added before the webpack-dev-middleware and webpack-hot-middleware. The ordering caused the clients to continue to fetch the version from disk, which wasn't being modified. By moving the static middleware below those entries, I was able to fix the problem, and now the client is receiving the version compiled from memory
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: