Hydration Mismatch + any client logic don't work
Hey everyone!
I'm doing using Solid-Start and face with some problems
Firstly, I have a hydration error in usual component like this:
<svg {...restParams}>{children}</svg>
which takes only svg-related tags as childern prop, so there is no way that some problems can be here, but some times I have hydration mismatch error for that usual component (full error description in the screenshot)
And, secondly, I don't know why, but any client logic (like signals, navigation and so on) seems not to work.
It seems that hydration don't work at all and my components only render on vinxi server.
Any information how to fix them - wiil help! Thanks everyone in advance. 😄
Source code: https://github.com/aver77/SolidStart-blog
GitHub
GitHub - aver77/SolidStart-blog
Contribute to aver77/SolidStart-blog development by creating an account on GitHub.
3 Replies
In solid you must not destructure props (as in your layout component) because this will cause to loose reactivity and results in hydration mismatches
Thank you for answer! I refactored all my components, removed destructuring and that didn't help.
I tried to add signals to different parts of my app and found out that reactivity doesn't work in props.childen wrapped by Suspence in my router (it means generally in every route).
I am on my phone so I can’t really dive into your code base
Another common source of hydration mismatches is when you call the accessor returned by createAsync outside of any Suspense boundary.
Or I found destrucuturing here
src/shared/assets/svg/components/book.tsx
you may take a look at splitProps
https://docs.solidjs.com/reference/reactive-utilities/split-props
splitProps - SolidDocs
Documentation for SolidJS, the signals-powered UI framework