Repository navigation
[Bug?]: Client Only component displayed in app.tsx causes hydration errors聽#1452
Description
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:
- Open https://stackblitz.com/edit/github-hn2yqi?file=src%2Froutes%2Findex.tsx
- Reload the page
- Wait for 1 second and notice a hydration mismatch error
- If you set the variable
perform_hydration_errorto false then you shall see the hydration error disappear - This is because setting
perform_hydration_errorto 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
Activity
ryansolid commentedon May 3, 2024
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.birkskyum commentedon Aug 17, 2026
Retested the same pattern with
@solidjs/start@2.0.0andsolid-js@1.9.15. It is still reproducible: a top-level fragment containing aclientOnlysibling followed by a route subtree that suspends producesHydration Mismatch. Unable to find DOM nodes for hydration keyand clears the rendered app.Removing the suspension avoids the mismatch, consistent with the original report. Solid 1.9.15 therefore does not resolve this issue.
birkskyum commentedon Aug 17, 2026
I reduced this to the built-in
clientOnlyhelper plus a plaincreateResource, published the reproduction, and filed the remaining hydration bug upstream:The mismatch still requires the same combination: an app-level top-level fragment, the client-only sibling, and a suspending route subtree. Replacing the fragment with a
<div>or making the route synchronous prevents it. The repro also disables the SolidStart dev overlay as a control.lxsmnsyc commentedon Oct 13, 2026
A status note, since the upstream issue changed state:
nextruntime). Both SolidStart 1.x and 2.0 run onsolid-js1.9, which has no fix, so this still affects every released SolidStart.1.xbranch (solid-js1.9.17), which the original report was against. A top-level fragment with aclientOnlysibling and a suspending route gives the same hydration mismatch. A synchronous route, or a<div>in place of the fragment, does not.The
<div>workaround from above still applies.