T
TanStack•3mo ago
extended-salmon

Hydration error from dynamic asset link rendering SPA shell

hi! i'm wondering about this hydration error. I can see that all of my requests are being served the spa shell that was prerendered. when a deeper route loads as the landing page there's an asset link mismatch. i see a hydration error but do see suppressHydrationWarning just not on all of the links. i'm wondering if i'm not configuring things correctly. thanks! 
+                         <link
+                           rel="stylesheet"
+                           href="/assets/DateRangeDropdown-Z5A5LZdl.css"
+                           type="text/css"
+                           suppressHydrationWarning={true}
+                         >
-                         <link rel="stylesheet" href="/assets/ProfileSettings-pWDqssfA.css" type="text/css">
                        ...
                    ...

    at Dr (react-dom-client.development.js:4430:11)
    at os (react-dom-client.development.js:10771:17)
    at D (react-dom-client.development.js:1519:30)
    at Lc (react-dom-client.development.js:15132:22)
    at Ic (react-dom-client.development.js:15126:9)
    at Fc (react-dom-client.development.js:15101:15)
    at Sc (react-dom-client.development.js:14418:13)
    at gl (react-dom-client.development.js:16216:7)
    at MessagePort.t (scheduler.development.js:45:48)
+                         <link
+                           rel="stylesheet"
+                           href="/assets/DateRangeDropdown-Z5A5LZdl.css"
+                           type="text/css"
+                           suppressHydrationWarning={true}
+                         >
-                         <link rel="stylesheet" href="/assets/ProfileSettings-pWDqssfA.css" type="text/css">
                        ...
                    ...

    at Dr (react-dom-client.development.js:4430:11)
    at os (react-dom-client.development.js:10771:17)
    at D (react-dom-client.development.js:1519:30)
    at Lc (react-dom-client.development.js:15132:22)
    at Ic (react-dom-client.development.js:15126:9)
    at Fc (react-dom-client.development.js:15101:15)
    at Sc (react-dom-client.development.js:14418:13)
    at gl (react-dom-client.development.js:16216:7)
    at MessagePort.t (scheduler.development.js:45:48)
2 Replies
vicious-gold
vicious-gold•3mo ago
so looks like your shell has different CSS than what the client renders upon hydration where does the CSS come from in the prerendered shell?
vicious-gold
vicious-gold•3mo ago
maybe need to set a different mask path? https://tanstack.com/start/latest/docs/framework/react/spa-mode#shell-mask-path
SPA mode | TanStack Start React Docs
What the heck is SPA mode? For applications that do not require SSR for either SEO, crawlers, or performance reasons, it may be desirable to ship static HTML to your users containing the "shell" of yo...

Did you find this page helpful?