Incorrect "unable to reuse markup" warning message

[th0r]

React 0.13 improved warning message when it fails to reuse server rendered markup and now shows the exact incorrect part.
But it shows wrong part if there are text nodes containing some html-escaped chars (single quotes, double quotes etc.) somewhere before this incorrect part.
For example, React shows this message...

(client) sxg4h94hs.2.1.0.1">{"Hi!"
(server) sxg4h94hs.2.1.0.1">"Hi!"

...but this part is ok. The problematic markup (which actually renders differently on client and server) is located after this place in DOM.
If i remove "Hi!" text from the rendered markup, React shows correct warning message and points to the real problematic place.

[klimashkin]

+1

[syranide]

react/src/browser/ui/ReactMount.js

Line 819 in 75a8bc9

var rootMarkup = rootElement.outerHTML;

It's comparing it against outerHTML which isn't guaranteed to be identical to the initial markup (and never is on IE8 too).

cc @arnihermann

[arnihermann]

I was aware that outerHTML might cause issues like this at some point :\ Me and @vjeux decided that since it was just a debug message, we were going to try it out and see how it worked out.

innerHTML might be more accurate but we'd have to perform it on the parent element and find the rootMarkup in the innerHTML string. I'm not sure but I think neither outerHTML nor innerHTML will guarantee to give back the same html as the initial markup.

I'm happy to work on it to prevent these kind of issues but I'd like to call for suggestions on how to fix permanently.

@th0r which browser were you using when this occured?

[th0r]

@arnihermann Latest Chrome.

[syranide]

@arnihermann innerHTML vs outerHTML makes no difference, the issue is that neither of them gives any guarantee to return the same markup you put in. The only reasonable solution I see is to render the new markup as well and read outerHTML from it and compare that.

[knightli]

+1

[rayquiz]

+1.
I'm wondering if use of escapeTextContentForBrowser on 'outerHTML' before comparing against client markup couldn't be a solution ?

[voideanvalue]

I'm wondering if use of escapeTextContentForBrowser on 'outerHTML' before comparing against client markup couldn't be a solution ?

I don't think that'll work. Copy/pasting my comments from #3465

I'm not sure what would be a good way to fix this. Re-escaping " to " and ' to ' in rootMarkup before comparing calling firstDifferenceIndex (

react/src/browser/ui/ReactMount.js

Line 830 in a321247

var diffIndex = firstDifferenceIndex(markup, rootMarkup);

) would likely escape unrelated characters as well and unescaping both markup and rootMarkup before comparing would not produce an exact diff (unless we were to keep track of the unescapes performed before comparing and then revert them while producing the diff string, but that sounds like going through more trouble than might be needed).

[jordaaash]

This issue reliably occurs with boolean attributes like disabled and checked which React renders differently on the client and server:

(client) ect-prompt" disabled value="" data-react
(server) ect-prompt" disabled="" value="" data-re

Related: #961, #1005

[sophiebits]

@jordansexton The message here is a red herring – it's not those attributes themselves that are the problem, but something else in your markup.

[jordaaash]

@spicyj Hmm. Any pointers on how to diagnose this since the invariant error message is flawed?

[sophiebits]

@jordansexton My best suggestion is to call React.renderToString on the server and on the client and compare them. They'll have different root node IDs so the strings won't match up directly but maybe you can do a find and replace to make them match up.