[Bug?]: Client Only component displayed in app.tsx causes hydration errors

[ardeora]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

If a client only component is added in app.tsx and when the matching route suspends then a hydration mismatch error is caused.

Expected behavior 🤔

There should be no hydration mismatch error when including a client only component anywhere in the app

Steps to reproduce 🕹

Steps:

1. Open https://stackblitz.com/edit/github-hn2yqi?file=src%2Froutes%2Findex.tsx
2. Reload the page
3. Wait for 1 second and notice a hydration mismatch error
4. If you set the variable perform_hydration_error to false then you shall see the hydration error disappear
5. This is because setting perform_hydration_error to false prevents the matching route in index.tsx from suspending

Context 🔦

I am a maintainer of TanStack Solid Query. I found this error because I wanted to create the hackernews demo using SolidStart and SolidQuery. Adding the SolidQueryDevtools that are only supposed to run on the client was breaking the app. Any ideas here would be greatly appreciated 🙏

Your environment 🌎

No response

[ryansolid]

Ok I see it. Another variation of the top-level fragment bug. This is similar problem to portals. Wrapping your component in a <div> is a workaround but I will see what I can do here.