{"id":3768,"date":"2016-04-17T01:06:33","date_gmt":"2016-04-17T01:06:33","guid":{"rendered":"http:\/\/www.garysieling.com\/blog\/?p=3768"},"modified":"2016-04-17T01:06:33","modified_gmt":"2016-04-17T01:06:33","slug":"fixing-react-attempted-reuse-markup-container-checksum-invalid","status":"publish","type":"post","link":"https:\/\/www.garysieling.com\/blog\/fixing-react-attempted-reuse-markup-container-checksum-invalid\/","title":{"rendered":"Fixing: &#8220;React attempted to reuse markup in a container but the checksum was invalid.&#8221;"},"content":{"rendered":"<p>Sometimes you can get a React error about markup not matching between the client and server:<\/p>\n<pre>\nwarning.js:44 Warning: React attempted to reuse markup in a container but the checksum\n was invalid. This generally means that you are using server rendering and the markup \ngenerated on the server was not what the client was expecting. React injected new \nmarkup to compensate which works but you have lost many of the benefits of server \nrendering. Instead, figure out why the markup being generated is different on the \nclient or server:\n (client) put type=\"checkbox\" style=\"margin:1px 4p\n (server) put type=\"checkbox\" name=\"TLS_ECDHE_RSA_\n<\/pre>\n<p>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:<\/p>\n<pre lang=\"javascript\">\n ' (client) ' + \n  normalizedMarkup.substring(diffIndex, diffIndex + 150) + \n  '\\n (server) ' + \n  rootMarkup.substring(diffIndex, diffIndex + 150);\n<\/pre>\n<p>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.<\/p>\n<p>This can be caused by a couple things, you fighting with Node for control of tags, or by <a href=\"https:\/\/github.com\/facebook\/react\/issues\/6451\">a defect in a browser (e.g. Chrome)<\/a>.<\/p>\n<p>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):<\/p>\n<pre lang=\"bash\">\nnpm install object.assign --save\n<\/pre>\n<p>And add this to your Javascript code:<\/p>\n<pre lang=\"javascript\">\ndelete Object.assign;\nObject.assign = require('object.assign').shim();\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Fixing a strange variant on this error: &#8220;React attempted to reuse markup in a container but the checksum was invalid. &#8220;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[9],"tags":[302,324,387,455],"aioseo_notices":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/3768"}],"collection":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/comments?post=3768"}],"version-history":[{"count":0,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/3768\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/media?parent=3768"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/categories?post=3768"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/tags?post=3768"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}