Hydration issue on tanstack start

[Christopher96u]

TanStack Devtools version

Latest

Framework/Library version

Latest

Describe the bug and the steps to reproduce it

I had to turn off the injectSource flag otherwise I get hydration issues on tanstack start

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

See Image

Screenshots or Videos (Optional)

See Image

Do you intend to try to help solve this bug with your own PR?

None

Terms & Code of Conduct

• I agree to follow this project's Code of Conduct
• I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[AlemTuzlak]

Sorry but I can't reprorduce this, I need a repro to look into this

[mackattack3k]

I set up a reproduction with a tanstack start template

npx gitpick TanStack/router/tree/main/examples/react/start-basic start-basic
cd start-basic
npm install

Added tanstack devtools to __root.tsx and to vite.config.ts, thats it.

And I get this error

Repo here:
https://github.com/mackattack3k/tanstack-devtools-hydration-error

[mackattack3k]

Removing the vite config devtools solves the hydration issue, but that's because the data-tsd-source is completely removed.

[YuriyLyukov]

The fix is suppressHydrationWarning on and to handle attribute mismatches from browser extensions, theme providers, and injectSource attributes

[kirill-dev-pro]

Im getting similar issue with Source inspector

But only in one project where I added it manually. I have another without such issue and it was started from a template. But I couldn't yet find differences

[kirill-dev-pro]

Ah, found it! It was position of the @tanstack/devtools-vite in the plugins array in vite.config.ts
It should be first one.