Fixing: “React attempted to reuse markup in a container but the checksum was invalid.”

Sometimes you can get a React error about markup not matching between the client and server:

warning.js:44 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) put type="checkbox" style="margin:1px 4p
 (server) put type="checkbox" name="TLS_ECDHE_RSA_

If this happens, you may want to put a breakpoint in warning.js where this occurs. You can go up a level in the stack to see more content:

 ' (client) ' + 
  normalizedMarkup.substring(diffIndex, diffIndex + 150) + 
  '\n (server) ' + 
  rootMarkup.substring(diffIndex, diffIndex + 150);

Apparently this error is caused by webkit and Node rendering the ordering of values in an object differently. The easiest way to fix this is to make the order of the props in your JSX code match what the client rendering has.

This can be caused by a couple things, you fighting with Node for control of tags, or by a defect in a browser (e.g. Chrome).

To fix the Chrome defect, the only way I could get this to work was to install this polyfill (object-assign is also supposed to work, but did not for me):

npm install object.assign --save

And add this to your Javascript code:

delete Object.assign;
Object.assign = require('object.assign').shim();