Skip to content

SSR Hydration issue when email (text) is present in html content #255

Description

@lcampanis

Thanks so much for this wonderful package.

Working with React@18.2.0 in SSR, it seems that when an email address (in text) is present in the html content rendered, it causes a hydration issue.

Interweave SSR polyfill is in place, so everything works as expected.
There isn't an actual problem with the text itself, they are both rendered the same in both client and server.

For some peculiar reason though, when using say something like this:

cont html = "<div class=\"container-fluid p-6\"><h1>Some text with an email address example@example.com as text</h1></div>"
<Markup content={html} />

React will through a Hydration error, saying text is different between server and client (when it's actually the same):
Hydration error:
Server: "Some text with an email address " (note that server text stops the text in the error right before the whole address)
Client: "Some text with an email address example@example.com as text"

When the email is inside an <a> tag it works fine. This works:

cont html = "<div class=\"container-fluid p-6\"><h1>Some text with an email address <a href=\"example@example.com\">example@example.com</a> as text</h1></div>"
<Markup content={html} />

And this works too (without the email in text):

cont html = "<div class=\"container-fluid p-6\"><h1>Some text without an email address as text</h1></div>"
<Markup content={html} />

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions