search

solidjs / solid-start

SolidStart, the Solid app framework
https://start.solidjs.com
MIT License
5.08k stars 377 forks source link

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

Open ardeora opened 5 months ago

ardeora commented 5 months ago

Duplicates

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 commented 4 months ago

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.