Checksum issue with encoded characters in Chrome

[mridgway]

We've recently started seeing issues with checksums on server rendered markup. Even though both the client and server are encoding the characters correctly, ReactMount is triggering a checksum warning and replacing the DOM. It seems Chrome may have changed its behavior with innerHTML/outerHTML and returns the encoded character rather than the encoding and causes the comparison to be incorrect. I do not see the issue in Firefox.

React.renderToString(<div>What's up</div>); correctly renders to <div>What&#x27;s up</div>, but React.render(<div>What's up</div>); over the same DOM shows 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) -4.0.3.0.0">What&#x27;s up</div>
 (server) -4.0.3.0.0">What's up</div>

At first I thought the messages were mixed up, but actually outerHTML for the existing root node is returning the decoded string.

Perhaps this is a bug in Chrome?

[sophiebits]

This is almost certainly a red herring. The warning message was improved to (probably) show the real cause in #4324.

[mridgway]

Interestingly, adding that change DOES fix the encoding issues, but now it seems that the ordering of attributes is different on the client vs. server. Again, still only happening in Chrome and probably to do with how outerHTML is working and not necessarily React.

[sophiebits]

Yeah. :\ Might be best to log it manually and use your favorite diff tool.

[sophiebits]

(Easiest to call renderToString on server and client and compare after making the root IDs the same with find/replace. I'd love to make this nore automatic if you have ideas…)

[mridgway]

Does ReactMarkupChecksum.canReuseMarkup take this into account though? I don't see the warning at all in Firefox for instance with the same markup/state. I don't think it's just the warning that's the problem, but the markup used for checksum calculation on the client.

[sophiebits]

No, canReuseMarkup just looks at the checksum which is of the HTML before the browser touches it at all. There shouldn't be any cross-browser differences so if you have some maybe it's your code doing feature detection of some sort?

[mridgway]

Ah, right. Makes sense. I'm deep diving into the markup to see what's different.

[mridgway]

For posterity's sake, it turns out that Chrome now has Object.assign support and the object-assign package will fall back to using the native method. The key ordering is different when using Object.assign vs. object-assign's polyfill.