React: HTML entities with renderToNodeStream and renderToStaticNodeStream causing mismatch with hydrate.

[Mikeysax]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

When the server is started with an HTML entity anywhere within a component's JSX, it causes a mismatch to occur when using hydrate.

warning.js:33 Warning: Text content did not match. Server: "©" Client: "©"

What is the expected behavior?

I don't expect there to be a mismatch. This only occurs with renderToNodeStream and renderToStaticNodeStream and doesn't occur when using renderToString or renderToStaticMarkup.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

React 16.1.1
Chrome 62+
Manjaro Linux

Not sure if this worked in previous versions.

[gaearon]

Mind creating a small project demonstrating it?

[Mikeysax]

@gaearon Created a new SSR React app: https://github.com/Mikeysax/testNodeStream

Seems like any HTML entities cause a match error. I have   within a component and it's triggering a match error.

I'm wondering if the error is caused by this: https://github.com/facebook/react/blob/master/packages/react-dom/src/shared/escapeTextContentForBrowser.js#L67-L68

This whole function looks like it isn't taking into account usage of HTML entities. I'm not super familiar with the code base but I could see why it would be an issue if my thought is correct.

[iamdustan]

The issue is an encoding issue. You need either of the following:

• in head: <meta charSet="utf8" />
• http header: Content-Type: text/html; charset=utf-8

[Mikeysax]

@iamdustan That works; I think I accidentally deleted it at some point.

Firefox displays the error in the screenshot and Chrome doesn't even come close.

[gaearon]

Is there any way we could detect it and show a better warning ourselves?

[Mikeysax]

@gaearon I'm not sure because I'm not super intimate with the library.

I guess React could detect document encoding on the initial mount and throw an error or log a message if it's not specified in the initial document?

Maybe React could possibly add utf-8 encoding to the document as a default if it isn't specified?

https://developer.mozilla.org/en-US/docs/Web/API/Document/characterSet