Repro: Hydration mismatch error with TanStack Start + streaming + Material UI + Emotion

[evanweible-wf]

Issue

I'm trying to follow this pattern (https://tanstack.com/router/latest/docs/integrations/query) to automate SSR dehydration/hydration and streaming between TanStack Router and TanStack Query in a TanStack Start app. When doing so with components that use MUI with Emotion, the streaming of queries causes a hydration mismatch error when useSuspenseQuery un-suspends.

Uncaught Error: Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

https://react.dev/link/hydration-mismatch

  ...
    <MatchImpl matchId="/about">
      <SafeFragment>
        <SafeFragment fallback={null}>
          <CatchBoundary getResetKey={function getResetKey} errorComponent={function defaultErrorComponent} ...>
            <CatchBoundaryImpl getResetKey={function getResetKey} onCatch={function onCatch}>
              <SafeFragment fallback={function fallback}>
                <MatchInnerImpl matchId="/about">
                  <Lazy>
                    <RouteComponent>
                      <Typography2>
                      <Suspense fallback={<AboutLoading>}>
                        <AboutData>
                          <Typography2 variant="body1" sx={{color:"#35..."}}>
                            <MuiTypography-root as="p" ref={null} className="MuiTypogra..." sx={{color:"#35..."}} ...>
                              <Insertion2>
+                             <p
+                               className="MuiTypography-root MuiTypography-body1 css-17h54qd-MuiTypography-root"
+                               style={{}}
+                             >
-                             <style data-emotion="css 17h54qd-MuiTypography-root">

Minimal Repro

This branch updates the existing TanStack Start + Material UI example to also use the query streaming pattern linked above.

1. Checkout this branch and cd into examples/react/start-material-ui/
2. pnpm install
3. pnpm dev
4. Open http://localhost:3000/about and open the console
5. Refresh and note that at first, the page renders the Suspense fallback component until the query prefetch that started on the server resolves (after 1 second), at which point it re-renders with the actual content. This is when we get the hydration mismatch error.
6. In the examples/react/start-material-ui/src/routes/about.tsx file, change isStreaming to false.
7. Refresh again and note that there is no hydration mismatch error (I think because it is avoided by not suspending in the first place).

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[evanweible-wf]

fyi, I did some more investigation into this and have a Discord thread going here: https://discord.com/channels/719702312431386674/1428058375446593637/1428058375446593637