Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bug: SSR: "Text content did not match" for inline CSS in style element #26946

Closed
EmielM opened this issue Jun 14, 2023 · 10 comments
Closed

Bug: SSR: "Text content did not match" for inline CSS in style element #26946

EmielM opened this issue Jun 14, 2023 · 10 comments
Labels
Resolution: Stale Automatically closed due to inactivity Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug

Comments

@EmielM
Copy link

EmielM commented Jun 14, 2023 •
edited
Loading

When using Server Side Rendering for the complete document (as suggested in the docs), and having inline css that contains quotes (", ') in a style element:

function App() {
  return <html>
    <head>
      <style>body { font-family: "Comic Sans"; }</style>
    </head>
  </html>;
}

The quotes are encoded by react-dom/server as &quot;, and client-side hydration chokes:

Warning: Text content did not match. Server: "body { font-family: &quot;Comic Sans&quot;; }" Client: "body { font-family: "Comic Sans"; }"
    at style
    at head
    at html
    at App2
printWarning @ bundle.js:2426

React version: 18.2.0
Reproducing case: https://github.com/EmielM/react-ssr-reconcile-repro

For completeness, the verbatim HTML output from the server:

<!DOCTYPE html><html><head><style>body { font-family: &quot;Comic Sans&quot;; }</style></head><body>Body!</body></html><script src="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/bundle.js" async=""></script>
@EmielM EmielM added the Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug label Jun 14, 2023
@EmielM EmielM changed the title Bug: SSR: "Text content did not match" for style's innerHtml/text Bug: SSR: "Text content did not match" for style content Jun 14, 2023
@EmielM EmielM changed the title Bug: SSR: "Text content did not match" for style content Bug: SSR: "Text content did not match" for inline CSS in style element Jun 14, 2023
@Shurtu-gal
Copy link

@EmielM Remove the quotes. They are unnecessary

createElement('style', {}, 'body { font-family: Comic Sans; }')

@EmielM
Copy link
Author

EmielM commented Jun 16, 2023 •
edited
Loading

@Shurtu-gal this is a synthetic/simplified example, there are cases when you really need a quote in your css, eg for content: '"', or selectors such as a[href="https://…"]. In any case, react-dom should handle this correctly.

@YantD729
Copy link

I think it is a problem on hydration on CSR. Although this is my first issue, I would like to have a try. Do you mind to assign it to me? Thank you :3 I will update immediately once I feel not okay to solve it.

@EmielM
Copy link
Author

EmielM commented Oct 3, 2023

@YantD729 We're still having this, would you mind :)?

@kotarella1110
Copy link

I have encountered this issue as well.
While it's a somewhat hacky solution, you can bypass the encoding of quotes and eliminate hydration errors by using dangerouslySetInnerHTML to create a style element.

function App() {
  return <html>
    <head>
      <style dangerouslySetInnerHTML={{ __html: "body { font-family: "Comic Sans"; }" }}></style>
    </head>
  </html>;
}

HTML output:

<!DOCTYPE html><html><head><style>body { font-family: "Comic Sans"; }</style></head><body>Body!</body></html><script src="/bundle.js" async=""></script>

@jereaa
Copy link

jereaa commented Feb 29, 2024

I'm having the same issue when rendering with renderToPipeableStream.
As for my example, you just need to refer to React's new documentation for the <style> tag under react/dom.

image

Same thing happens with inline scripts and characters like & that get encoded.

@github-actions GitHub Actions
Copy link

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

@github-actions github-actions bot added the Resolution: Stale Automatically closed due to inactivity label May 29, 2024
@jereaa
Copy link

jereaa commented May 30, 2024

Still an issue

@github-actions github-actions bot removed the Resolution: Stale Automatically closed due to inactivity label May 30, 2024
@github-actions GitHub Actions
Copy link

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

@github-actions github-actions bot added the Resolution: Stale Automatically closed due to inactivity label Aug 28, 2024
@github-actions GitHub Actions
Copy link

github-actions bot commented Sep 4, 2024

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!

@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Sep 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Resolution: Stale Automatically closed due to inactivity Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@EmielM @jereaa @kotarella1110 @Shurtu-gal @YantD729