Adxtti
Adxtti
SSolidJS
Created by mrVinicius on 11/28/2024 in #support
Hydration error when using <Show>
https://docs.solidjs.com/guides/state-management https://docs.solidjs.com/reference/rendering/hydrate & https://www.solidjs.com/guides/server During server side rendering, hasRequired and hasDefault initialize at false — upon hydration, the client will run your logic setting the hasRequired and hasDefault signals to true, this mismatch is causing your hydration error I believe Solid behaves this way, and has its reasons, I'm sure a teams member will have a better response
14 replies
SSolidJS
Created by mrVinicius on 11/28/2024 in #support
Hydration error when using <Show>
because <Show> renders its children based on the value of its when prop
if (!hasRequired() && prop.required) setHasRequired(true);
if (!hasDefault() && prop.default) setHasDefault(true);
if (!hasRequired() && prop.required) setHasRequired(true);
if (!hasDefault() && prop.default) setHasDefault(true);
This leads to a situation in which the server-rendered HTML doesn’t include ”Required” and ”Default” (since the signals are false) but the client-rendered HTML does therefore leading to your hydration error You should iterate over the props.components array to solve this
const hasRequired = props.components.some(component =>
component.props.some(prop => prop.required)
);
const hasDefault = props.components.some(component =>
component.props.some(prop => prop.default)
);
const hasRequired = props.components.some(component =>
component.props.some(prop => prop.required)
);
const hasDefault = props.components.some(component =>
component.props.some(prop => prop.default)
);
14 replies