Describe the bug
import { createSignal } from "solid-js";
import { createElementSize } from "@solid-primitives/resize-observer";
export default function ElementSizeHydrationRepro() {
const [target, setTarget] = createSignal<HTMLDivElement>();
const size = createElementSize(target);
return <><div ref={setTarget}>Width: </div>{size.width ?? "waiting"}</>;
}The cause is that createEffect advances hydration id but it's only created on the client:
A workaround would be wrapping the use site in a new owner. A proper fix would be always createEffect regardless of isServer or not.
BTW, I believe that the idiomatic Solid2 way of writing this would be creating a writable signal with ssrSource: "client". This way the returned size can be non-null, but the result must be wrapped in a separate <Loading> boundary or else the component could never render due to the loop render -> get size -> observed el not mounted until rendered -> isPending, abort render. It sounds problematic at first but it actually prevents the render loop of using the size inside the measured element. However, that's a behavior change and needs discussion.
Minimal Reproduction Link
stack blitz pnpm is too old to run the new template
Describe the bug
The cause is that
createEffectadvances hydration id but it's only created on the client:solid-primitives/packages/resize-observer/src/index.ts
Line 201 in 74ac166
A workaround would be wrapping the use site in a new owner. A proper fix would be always createEffect regardless of
isServeror not.BTW, I believe that the idiomatic Solid2 way of writing this would be creating a writable signal with
ssrSource: "client". This way the returned size can be non-null, but the result must be wrapped in a separate<Loading>boundary or else the component could never render due to the loop render -> get size -> observed el not mounted until rendered -> isPending, abort render. It sounds problematic at first but it actually prevents the render loop of using the size inside the measured element. However, that's a behavior change and needs discussion.Minimal Reproduction Link
stack blitz pnpm is too old to run the new template