hydrating a component with dangerouslySetInnerHTML and toString causes a warning, and the component to not render

[magicmark]

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

bug

What is the current behavior?

When hydrating a pre-rendered component that uses dangerouslySetInnerHTML, + an object with a toString method, we get a warning such as:

Warning: Did not expect server HTML to contain the text node "Bonjour" in <p>.

The component will also appear blank.

This is noteworthy since:

• The markup returned by render appears to be correct, meaning:
  • The markup that an SSR server returns is correct
  • The markup that appears on page if we just use render on the client, without SSR is correct
• It's only if we do both, that we get errors.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template for React 16: https://jsfiddle.net/Luktwrdm/, template for React 15: https://jsfiddle.net/hmbg7e9w/).

https://codesandbox.io/s/vqkq34o965

(Code, for posterity:)

import React from "react";
import { hydrate } from "react-dom";

const HelloObj = {
  toString: () => "Bonjour"
};

const MyComponent = () => (
  <p
    dangerouslySetInnerHTML={{
      __html: HelloObj
    }}
  />
);

hydrate(<MyComponent />, document.getElementById("app"));

What is the expected behavior?

The component is not blank, and no error is outputted in the console

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

• react/react-dom 16.2.0
  • This worked < 16 (confirmed working in 15.6.1, if we use the render method)
• Chrome Version 62.0.3202.94
• OS X 10.12.6

[nubunto]

I would really like to take this! I'm going to take a look more deeply in a few hours/tomorrow. If anyone care to point me to anything, that would be great. Should be my first contribution!

[gaearon]

@nubunto Good luck!

[robgietema]

@magicmark does your last commit fix the issue? (since the tests seem to pass now) And if so can we make a PR for this?

[magicmark]

@robgietema the PR is here #11792

[tirthbodawala]

@gaearon @magicmark do we have any update on the issue and PR?

[gaearon]

Reviewed the PR: #11792 (review)

[ata-marzban]

@magicmark @gaearon I found a way to work around this issue and avoid using dangerouslySetInnerHtml using an HTML parser package such as react-html-parser, it basically parses the HTML and outputs react elements so you are not using dangerouslySetInnerHtml at all!

[gaearon]

#13353