Console warnings on client showing div with zero negative height

[cliffordkleinsr]

Describe Your Error

When mounting any chart I get the following error on the console from the client:

client.js?v=3aef0bf5:2692 [LayerCake] Target div has zero or negative height. Did you forget to set an explicit height in CSS on the container?

client.js?v=8ae4c4ed:2692 [svelte] reactive_declaration_non_reactive_property
A `$:` statement (node_modules/​layercake/​dist/​LayerCake.svelte:225:1) read reactive state that was not visible to the compiler. Updates to this state will not cause the statement to re-run. The behaviour of this code will change if you migrate it to runes mode

Supporting Attachments

This error bloats the client console with successful reloads.

Severity

Annoyance but can be ignored

Package versions

node: v22.11.0 bun: 1.1.38 layerchart: "^0.59.5", "svelte": "^5.5.3", "svelte-check": "^4.1.1",

[techniq]

Hi @cliffordkleinsr 👋, thanks for the report. This is something I plan to investigate/resolve when I fully migrate to Svelte 5 (runes, snippets). I noticed this started when I updated the docs to run on Svelte 5, and there appears to be some timing difference that I haven't been able to workaround/resolve.

What's interesting is the returned width/height measurements are different if you initially render the page (or refresh) vs going to the page from a link (client side routing). This is with SSR disabled as well

Client navigation (click on link to render new page)

Page load (no ssr)

LayerCake provides these using bind:clientWidth / bind:clientHeight. In Svelte 5, they now use ResizeObserver instead of a hidden iframe to calculate the dimensions, which might have affected the timings.

Note: there is a non-passive event warning I'm also tracking in #292 to cleanup as well.

[cliffordkleinsr]

Many thanks and also thank you for the wonderful library. I will await further input as you migrate the library.

[techniq]

Looks like reactive_declaration_non_reactive_property warnings might be getting cleaned up in an upcoming release.

https://github.com/sveltejs/svelte/pull/14663

[techniq]

Resolved via #458 and released as [email protected]