dangerouslySetInnerHTML is left empty on client render on top of bad server markup when rendering HTML

[petetnt]

This seems to be an edge case of #11789 fixed in https://github.com/facebook/react/pull/13353/files.

I ran into this when trying to hydrate content rendered with https://github.com/prismicio/prismic-dom asHtml method.

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

Bug? I think.

What is the current behavior?

Current behavior:

1. Server-side stuff comes in from server and contains the things we need
2. Hydration mismatch happens
3. dangerouslySetInnerHTML is called with correct value but an empty string gets rendered instead

I tried to replicate the issue on https://codesandbox.io/s/2xojk10jln but failed.

The following testcase for packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js produces the same result (I tried it first with the same PrismicDOM.RichText.asHtml(obj) call I have in the app) but I am not sure if it's correct:

# test case
  itRenders(
    'a div with dangerouslySetInnerHTML set to html inserted',
    async render => {
      const obj = '<li>bar</li>';
      const e = await render(
        <div dangerouslySetInnerHTML={{__html: obj }} />,
      );
      expect(e.childNodes.length).toBe(1);
      expect(e.firstChild.tagName).toBe('LI');
      expect(e.firstChild.childNodes.length).toBe(1);
    },
  );

      ✓ renders a div with dangerouslySetInnerHTML set to html return value of function called with server string render (190ms)
      ✓ renders a div with dangerouslySetInnerHTML set to html return value of function called with server stream render (52ms)
      ✓ renders a div with dangerouslySetInnerHTML set to html return value of function called with clean client render (37ms)
      ✓ renders a div with dangerouslySetInnerHTML set to html return value of function called with client render on top of good server markup (74ms)
      ✕ renders a div with dangerouslySetInnerHTML set to html return value of function called with client render on top of bad server markup (34ms)

  ● ReactDOMServerIntegration › ... › renders a div with dangerouslySetInnerHTML set to html return value of function called with client render on top of bad server markup

    expect(received).toBe(expected) // Object.is equality

    Expected: "bar"
    Received: ""

What is the expected behavior?

The client render would have rendered <li>bar</li>

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

commit c05b4b8 (latest master) and >16.8.

Sorry for a bit vague bug report.

[gaearon]

Do you want to try to fix it?

[petetnt]

@gaearon sure! :) Already dove into it a bit

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

[gaearon]

Still relevant?

[olaj]

I think i may have ran into this today. Haven't done that much research, and i'm pretty new in the react world. Is there any kind of work around?

[petetnt]

Sorry, I forgot totally about this...

[olaj]

Hmm ... but im not sure it was this for me. Or it seemed that i tried to render a <p> inside a <p> and when i removed the parent <p> it seems to work. Not sure if that is expected or not.

[jbutz]

I think I may be hitting this issue with a Gatsby site. I will see if I can create a streamlined version of the site that can reliably recreate the issue and I will share that as a debugging tool.

React v16.13.1
React-DOM v16.13.1

Edit: What @olaj mentioned seems to fix the issue in my case

[celso-vts]

I hit this issue today and here's a quick repro.

I'm not completely sure about what the desired behavior should be here, as nesting paragraph elements isn't compliant with HTML5's spec.

Using straight JSX produces the "desired" output, even though incorrect

On the other hand, using dangerouslySetInnerHTML automatically closes nested paragraph elements

[arthurpolon]

Hmm ... but im not sure it was this for me. Or it seemed that i tried to render a

inside a

and when i removed the parent <p> it seems to work. Not sure if that is expected or not.

It works for me, i was doing the same thing. This error was in my console as well:

[gaearon]

Could somebody please provide a sandbox showing the issue?

[gaearon]

Re: #15171 (comment)

There is a console error explaining that you're rendering invalid markup:

That's why it doesn't work.