Tanstack Start: using <style> tag in <Head> in `__root.tsx` file causes duplication lead to `Uncaught Error: Hydration failed because ...` #2587

Foxeye-Rinx · 2024-10-19T05:35:44Z

Foxeye-Rinx
Oct 19, 2024

The duplication leads to:

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.

Context:
I just finished the walkthrough of Tanstack Start and trying to add a 404 page with some tailwind styles.
I noticed that the HTML is the first thing that is transferred to the browser. Then client.tsx and app.css come after.
It causes a noticeable FOUC issue because the CSS comes later.

The common solution:
I searched the internet and the common solution is just to hide thehtml with CSS in <head> like

<style id='hideHTML'>
 html { visibility: hidden; opacity: 0; }
</style>

And then remove it after the app.css is loaded.

My RootDocument

function RootDocument({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    debugger
    console.log("See duplicated style tags with the debugger above")
  }, [])
  return (
    <Html>
      <Head>
        <style id='hideHTML'>{`html{visibility:hidden;opacity:0;}`}</style>
        <Meta />
      </Head>
      <Body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </Body>
    </Html>
  )
}

The app.css file load just after the NoutFound component's html (/1243421 returns not found component )

My app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  visibility: visible !important;
  opacity: 1 !important;
}

The whole code:
https://github.com/Foxeye-Rinx/TanstackStartWithDuplicatedTags

More information:

Remix tried to make a fix, but it introduced another problem with CSS ordering, which might be a potential bug in building production code:
https://youtu.be/mWK3Y_1kmaM?t=30628
Astro is:inline directive is an approach that allows me more control over how I can handle this FOUC issue
https://docs.astro.build/en/reference/directives-reference/#isinline, Astro removes the <style> tags and bundle it to external files, using is:inline is to keep the <style> tag stick to the original HTML, it's a flag to tell the bundler that should not touch to this tag.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tanstack Start: using <style> tag in <Head> in `__root.tsx` file causes duplication lead to `Uncaught Error: Hydration failed because ...` #2587

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

Tanstack Start: using <style> tag in <Head> in __root.tsx file causes duplication lead to Uncaught Error: Hydration failed because ... #2587

Foxeye-Rinx Oct 19, 2024

Replies: 0 comments

Tanstack Start: using <style> tag in <Head> in `__root.tsx` file causes duplication lead to `Uncaught Error: Hydration failed because ...` #2587

Foxeye-Rinx
Oct 19, 2024