Improve warning in react mount #4324
Conversation
drd
force-pushed
the
improve-warning-in-react-mount
branch
from
c567947 to
902b607
Compare
|
Your unit test passes even without your changes to ReactMount :/. |
|
Man. I definitely checked that at one point ;) Let me see what happened. |
facebook-github-bot
added
GH Review: review-needed
and removed
GH Review: needs-revision
labels
|
There we go. |
| normalizedMarkup = normalizer.innerHTML; | ||
| } else { | ||
| normalizer = document.createElement('iframe'); | ||
| document.body.appendChild(normalizer); |
There was a problem hiding this comment.
I feel like we should not be appending a child to the body here.
There was a problem hiding this comment.
I'd prefer not to, but unfortunately iframes only get a valid contentDocument when in the DOM. I've addressed this by immediately removing it from the DOM.
| var difference = ' (client) ' + | ||
| markup.substring(diffIndex - 20, diffIndex + 20) + | ||
| normalizedMarkup.substring(diffIndex - 20, diffIndex + 20) + | ||
| '\n (server) ' + rootMarkup.substring(diffIndex - 20, diffIndex + 20); | ||
|
|
||
| invariant( |
There was a problem hiding this comment.
Invariant shouldn't be in devmode block. @zpao should this even be an invariant? Seems like this could just be a warning?
There was a problem hiding this comment.
This isn't in a dev block and yes it should be an invariant. The message makes it pretty clear that React probably breaks when rendering to the document element with content that doesn't checksum.
We have a dev block lower for the warning. We could perhaps have a more concise difference there.
|
Ok, all looks reasonable to me. Thanks @drd! |
|
Is there any chance that this fix could be applied to the 0.13.x branch as well? I'm currently running a custom version of React which is just 0.13.3 with this pull request applied on top. |
|
@leolannenmaki We don't generally backport anything except critical fixes. React 0.14 should be out soon :). In the mean time, you can develop/test against master, or use one of the prebuilt packages mentioned in #4311, or do what you're already doing now. |
|
@jimfb ok, thanks. Looking forward to 0.14 👍 |
While I was debugging a problem reusing server-rendered markup, I was thrown off the track for a while because React was telling me there were differences in various entity encodings and attribute representations between the server- and client-rendered markup. For instance, the server markup would contain
while the client would contain a literal\u00a0character. Also, empty attributes on the client would be rendered asattributewhereas the server markup would showattribute="". After finally realizing that the real problem was in fact a different string being rendered on server vs client, I came up with this method to present more useful information when this situation arises.