absent-sapphire

A question about hydration errors, even out of the box in the basic example.

I've been running into this in my app, and I thought it was a mistake I was making, but I've got this recurring hydration error with the CSS links. It's reproducable even in the basic example on stackblitz: https://stackblitz.com/github/tanstack/router/tree/main/examples/react/start-basic Make some changes to the CSS, but save the file with some kind of error, for example a typo or syntax error. You'll see an error message. Now correct the error that error message is gone, but you'll have a hydration error that seems to persist until the server is restarted:

react-dom_client.js?v=c4f27ffa:3163 Uncaught Error: Hydration failed because the server 
[OMMITTED]
                            <Asset>
                            <Asset tag="link" attrs={{rel:"style...", ...}}>
+                             <link
+                               rel="stylesheet"
+                               href="/_build/app/styles/app.css?t=1738450098756"
+                               suppressHydrationWarning={true}
+                             >
-                             <meta charset="utf-8">
                            ...
                        ...
[OMMITTED]

react-dom_client.js?v=c4f27ffa:3163 Uncaught Error: Hydration failed because the server 
[OMMITTED]
                            <Asset>
                            <Asset tag="link" attrs={{rel:"style...", ...}}>
+                             <link
+                               rel="stylesheet"
+                               href="/_build/app/styles/app.css?t=1738450098756"
+                               suppressHydrationWarning={true}
+                             >
-                             <meta charset="utf-8">
                            ...
                        ...
[OMMITTED]

My question is, is there a workaround or a way to prevent this? It's very distracting.

StackBlitz

Router Start Basic Example - StackBlitz

Run official live example code for Router Start Basic, created by Tanstack on StackBlitz

11 Replies

frail-apricot•8mo ago

so this is a HMR issue then? we're working on full HMR

absent-sapphireOP•8mo ago

Maybe? it happens on full page refresh too. It will continue to happen until you kill and restart vinxi I notice the timestamp in the css URL, and wonder if there's a temp/cached copy of the css left over from the exception. It seems to only (or mostly?) happen after correcting an error made in the CSS.

frail-apricot•8mo ago

can you please create a github issue for this?

absent-sapphireOP•8mo ago

Sure. I don't know if this is start specific or if it's in the router 🤷‍♂️

frail-apricot•8mo ago

does it happen with a pure router project as well? probably not because there is no hydration so i'd say it's start only

absent-sapphireOP•8mo ago

That makes sense. Maybe the issue exists because of something happening in router, but it's only a problem with hydration in start. I'll open the issue on the start repo.

frail-apricot•8mo ago

we only have a single repo for both start and router 😄

absent-sapphireOP•8mo ago

oh they are the same

frail-apricot•8mo ago

yes

absent-sapphireOP•8mo ago

Yep. 😂

absent-sapphireOP•8mo ago

https://github.com/TanStack/router/issues/3306

GitHub

Hydration mismatch after correcting errors in linked stylesheets. ·...

Which project does this relate to? Start Describe the bug After making a change that introduces an exception in the css loading, once you've corrected the error, you'll get a persistent hyd...

Gaming

Programming

A question about hydration errors, even out of the box in the basic example.

Did you find this page helpful?