harsh-harlequin

Hydration error just by adding a <Scripts /> (suppress not working)

My TSS app with Convex, Convex auth and dark theme is suddenly showing a hydration mismatch error. Even when I comment out everything in <body /> I get this. Only way to make it go is to remove the <Scripts /> tag from TSR. Surprisingly adding suppressHydrationWarning={true} doesn't even make it go away. Any help here? I used the Convex option from the CLI in the official Tanstack docs.

18 Replies

eastern-cyan•2mo ago

what produces the data-tsd-source attribute ?

harsh-harlequinOP•2mo ago

                              <head
+                               data-tsd-source="/src/routes/__root.tsx:35:4"
-                               data-tsd-source="/src/routes/__root.tsx:42:4"
                              >
                              <body
+                               data-tsd-source="/src/routes/__root.tsx:38:4"
-                               data-tsd-source="/src/routes/__root.tsx:45:4"
                              >

                              <head
+                               data-tsd-source="/src/routes/__root.tsx:35:4"
-                               data-tsd-source="/src/routes/__root.tsx:42:4"
                              >
                              <body
+                               data-tsd-source="/src/routes/__root.tsx:38:4"
-                               data-tsd-source="/src/routes/__root.tsx:45:4"
                              >

line 35 is the ending of the createRootRoute function line 42 is the beginning of my <head><HeadContent /></head> line 38 is const theme = Route.useLoaderData(); for which i use loader: () => getThemeServerFn() line 45 is the beginning of my <body /> tag

harsh-harlequinOP•2mo ago

@Manuel Schiller i'm seeing this as well could this be relevant?

eastern-cyan•2mo ago

yes but who puts those attributes in there?

harsh-harlequinOP•2mo ago

doesn't start/router add them? they're not in my source code 🙂

eastern-cyan•2mo ago

no must be some vite plugin. can you share a complete reproducer project?

harsh-harlequinOP•2mo ago

like a project that reproduces this issue?

eastern-cyan•2mo ago

yes

harsh-harlequinOP•2mo ago

okay doing something

harsh-harlequinOP•2mo ago

hi @Manuel Schiller this reproduces it: https://github.com/shahank42/tanstack-hydration-error

GitHub

GitHub - shahank42/tanstack-hydration-error

Contribute to shahank42/tanstack-hydration-error development by creating an account on GitHub.

harsh-harlequinOP•2mo ago

bun install and bun dev @Manuel Schiller any help (┬┬﹏┬┬)

eastern-cyan•2mo ago

ok the issue comes from the devtools vite plugin commenting this out makes the issue disappear @alle00 can you please have a look why the devtools vite plugin produces different data-tsd-source attributes and thus causes a hydration error?

rival-black•2mo ago

Yep, I didnt have a minimum repro until now Does the plugin order affect it?

eastern-cyan•2mo ago

yes this order will cause the hydration issue

tanstackStart(),
devtools(),

tanstackStart(),
devtools(),

while this works

devtools(),
tanstackStart(),

devtools(),
tanstackStart(),

harsh-harlequinOP•2mo ago

wow, wild that this was what fixed it

equal-aqua•5d ago

Did you guys find anything else out on this issue? When I google "data-tsd-source" this is the only thread I can find (on answeroverflow) 👀 I get the same data-tsd-source error when I use <Source> from react-map-gl/maplibre. Moving devtools around does not help for me, but removing it resolves the issue.

rival-black•4d ago

You can add it to the ignore list in the vite plugin to skip that component

Gaming

Programming

Hydration error just by adding a <Scripts /> (suppress not working)

Did you find this page helpful?