Simplified charts crash server-side when ssr is enabled - snippet name shadows same-named $props() reference (marks/children)

Summary

Enabling the documented ssr prop (Chart API: "Whether this chart should be rendered server side") on the simplified charts (AreaChart, BarChart, LineChart, ScatterChart, PieChart, ArcChart) crashes the server render with infinite recursion / a TypeError. The charts render fine in the browser; only the SSR path is affected.

Root cause

The simplified charts destructure a prop that shares its name with a local snippet, and reference that name inside the snippet body:

<script>
  let { ..., marks, tooltip: tooltipProp, ... } = $props();
</script>

{#snippet marks({ context, facet })}
  {#if typeof marks === 'function'}
    {@render marks({ context, facet })}   <!-- resolves to the SNIPPET itself during SSR -->
  {:else}
    ...
  {/if}
{/snippet}

Inside {#snippet marks(...)}, the name marks resolves to the snippet itself (Svelte snippets are self-referential), shadowing the destructured prop. On the client this compiles to the intended prop lookup (charts work in the browser), but under the SSR compiler the same expression resolves to the snippet and self-recurses until the stack blows.

Note tooltip is already destructured as tooltipProp in these files - exactly the correct convention - and Svg.svelte / Canvas.svelte / Labels.base.svelte / RectClipPath.base.svelte / ChartChildren.base.svelte all destructure children: childrenProp for the same reason. Only the marks destructures (and children in Layer.svelte) still use the shadowing names.

Affected locations:

File	Shadowed name
`charts/AreaChart/AreaChart.base.svelte`	`marks`
`charts/BarChart/BarChart.base.svelte`	`marks`
`charts/LineChart/LineChart.base.svelte`	`marks`
`charts/ScatterChart/ScatterChart.base.svelte`	`marks`
`charts/PieChart/PieChart.base.svelte`	`marks`
`charts/ArcChart/ArcChart.base.svelte`	`marks`
`layers/Layer.svelte`	`children` (3 render sites)

Worth cross-checking against Svelte itself too - the client and SSR compilers appear to disagree on the scope of a snippet's self-reference vs. a shadowed name of the same spelling, which may deserve its own upstream report. Renaming is the robust fix either way (and matches the existing childrenProp convention).

Reproduction

SvelteKit app (SSR enabled), any page with a simplified chart and ssr:

<script lang="ts">
  import { AreaChart } from 'layerchart';
  const data = [
    { month: 'Jan', signups: 1 },
    { month: 'Feb', signups: 3 },
    { month: 'Mar', signups: 2 },
  ];
</script>

<AreaChart ssr data={data} x="month" y="signups" />

Load the page (server render).

Expected

Chart markup rendered into the SSR HTML (the auto-sized chart falling back to its placeholder size until the client measures), as the ssr prop documents.

Actual

HTTP 500 on the server render.

With AreaChart (2.6.1):

RangeError: Maximum call stack size exceeded
    at marks (.../layerchart/dist/components/charts/AreaChart/AreaChart.base.svelte:108:21)
    at marks (.../layerchart/dist/components/charts/AreaChart/AreaChart.base.svelte:108:16)
    ... (repeats)

With Layer in the tree first (2.5.1, same on 2.6.1):

TypeError: undefined is not a function
    at children (.../layerchart/dist/components/layers/Layer.svelte:63:29)
    ... (repeats)

Environment

layerchart: 2.6.1 (reproduced on 2.5.1 as well)
svelte: 5.57.2
@sveltejs/kit: 2.70.x
@sveltejs/vite-plugin-svelte: 7.x
vite: 8.3.2

Proposed fix

Rename the destructured props so they don't collide with the snippet names (marks → marksProp, children → childrenProp), matching the existing convention in Svg.svelte et al. This is what we currently ship as a patch-package patch; applying it makes SSR work with the simplified charts (verified: full chart SVGs in the SSR HTML, clean hydration).

Full patch (patch-package format)

diff --git a/node_modules/layerchart/dist/components/charts/ArcChart/ArcChart.base.svelte b/node_modules/layerchart/dist/components/charts/ArcChart/ArcChart.base.svelte
index 7f47a97..8924014 100644
--- a/node_modules/layerchart/dist/components/charts/ArcChart/ArcChart.base.svelte
+++ b/node_modules/layerchart/dist/components/charts/ArcChart/ArcChart.base.svelte
@@ -54,7 +54,7 @@
     props = {},
     profile = false,
     tooltipContext = true,
-    marks,
+    marks: marksProp,
     tooltip: tooltipProp,
     arc,
     labels = false,
@@ -242,8 +242,8 @@
   }}
 >
   {#snippet marks(snippetProps: any)}
-    {#if typeof marks === 'function'}
-      {@render marks(snippetProps)}
+    {#if typeof marksProp === 'function'}
+      {@render marksProp(snippetProps)}
     {:else}
       <Group {...getGroupProps()}>
         {#each series as s, i (s.key)}
diff --git a/node_modules/layerchart/dist/components/charts/AreaChart/AreaChart.base.svelte b/node_modules/layerchart/dist/components/charts/AreaChart/AreaChart.base.svelte
index bb40fc1..e489bce 100644
--- a/node_modules/layerchart/dist/components/charts/AreaChart/AreaChart.base.svelte
+++ b/node_modules/layerchart/dist/components/charts/AreaChart/AreaChart.base.svelte
@@ -34,7 +34,7 @@
     onPointClick,
     props = {},
     profile = false,
-    marks,
+    marks: marksProp,
     tooltip: tooltipProp,
     ref = $bindable(),
     context = $bindable(),
@@ -104,8 +104,8 @@
   }}
 >
   {#snippet marks({ context, facet }: { context: any; facet: any })}
-    {#if typeof marks === 'function'}
-      {@render marks({ context, facet })}
+    {#if typeof marksProp === 'function'}
+      {@render marksProp({ context, facet })}
     {:else}
       {#each context.series.visibleSeries as s (s.key)}
         <Area
diff --git a/node_modules/layerchart/dist/components/charts/BarChart/BarChart.base.svelte b/node_modules/layerchart/dist/components/charts/BarChart/BarChart.base.svelte
index 06b2458..9277fe5 100644
--- a/node_modules/layerchart/dist/components/charts/BarChart/BarChart.base.svelte
+++ b/node_modules/layerchart/dist/components/charts/BarChart/BarChart.base.svelte
@@ -39,7 +39,7 @@
     xInterval,
     yInterval,
     tooltipContext = true,
-    marks,
+    marks: marksProp,
     ref = $bindable(),
     context = $bindable(),
     ...restProps
@@ -117,8 +117,8 @@
   {props}
 >
   {#snippet marks({ context, facet }: { context: any; facet: any })}
-    {#if typeof marks === 'function'}
-      {@render marks({ context, facet })}
+    {#if typeof marksProp === 'function'}
+      {@render marksProp({ context, facet })}
     {:else}
       {#each context.series.visibleSeries as s, i (s.key)}
         <Bars
diff --git a/node_modules/layerchart/dist/components/charts/LineChart/LineChart.base.svelte b/node_modules/layerchart/dist/components/charts/LineChart/LineChart.base.svelte
index 29a66c2..579aacd 100644
--- a/node_modules/layerchart/dist/components/charts/LineChart/LineChart.base.svelte
+++ b/node_modules/layerchart/dist/components/charts/LineChart/LineChart.base.svelte
@@ -37,7 +37,7 @@
     props = {},
     profile = false,
     tooltipContext = true,
-    marks,
+    marks: marksProp,
     ref = $bindable(),
     context = $bindable(),
     ...restProps
@@ -117,8 +117,8 @@
   {props}
 >
   {#snippet marks({ context, facet }: { context: any; facet: any })}
-    {#if typeof marks === 'function'}
-      {@render marks({ context, facet })}
+    {#if typeof marksProp === 'function'}
+      {@render marksProp({ context, facet })}
     {:else}
       {#each context.series.visibleSeries as s, i (s.key)}
         <Spline seriesKey={s.key} {...props.spline} />
diff --git a/node_modules/layerchart/dist/components/charts/PieChart/PieChart.base.svelte b/node_modules/layerchart/dist/components/charts/PieChart/PieChart.base.svelte
index 6abaa40..b5d5692 100644
--- a/node_modules/layerchart/dist/components/charts/PieChart/PieChart.base.svelte
+++ b/node_modules/layerchart/dist/components/charts/PieChart/PieChart.base.svelte
@@ -56,7 +56,7 @@
     props = {},
     profile = false,
     tooltipContext = true,
-    marks,
+    marks: marksProp,
     tooltip: tooltipProp,
     pie,
     arc,
@@ -226,8 +226,8 @@
   }}
 >
   {#snippet marks(snippetProps: any)}
-    {#if typeof marks === 'function'}
-      {@render marks(snippetProps)}
+    {#if typeof marksProp === 'function'}
+      {@render marksProp(snippetProps)}
     {:else}
       <Group {...getGroupProps()}>
         <!-- Use `series` instead of `visibleSeries` since data is filtered (legend) instead of series -->
diff --git a/node_modules/layerchart/dist/components/charts/ScatterChart/ScatterChart.base.svelte b/node_modules/layerchart/dist/components/charts/ScatterChart/ScatterChart.base.svelte
index 6943bf0..2bbaf1f 100644
--- a/node_modules/layerchart/dist/components/charts/ScatterChart/ScatterChart.base.svelte
+++ b/node_modules/layerchart/dist/components/charts/ScatterChart/ScatterChart.base.svelte
@@ -34,7 +34,7 @@
     props = {},
     profile = false,
     tooltipContext = true,
-    marks,
+    marks: marksProp,
     tooltip: tooltipProp,
     ref = $bindable(),
     context = $bindable(),
@@ -88,8 +88,8 @@
   {props}
 >
   {#snippet marks({ context, facet }: { context: any; facet: any })}
-    {#if typeof marks === 'function'}
-      {@render marks({ context, facet })}
+    {#if typeof marksProp === 'function'}
+      {@render marksProp({ context, facet })}
     {:else}
       {#each context.series.visibleSeries as s, i (s.key)}
         <Points seriesKey={s.key} {...props.points} />
diff --git a/node_modules/layerchart/dist/components/layers/Layer.svelte b/node_modules/layerchart/dist/components/layers/Layer.svelte
index e699cee..d49a651 100644
--- a/node_modules/layerchart/dist/components/layers/Layer.svelte
+++ b/node_modules/layerchart/dist/components/layers/Layer.svelte
@@ -35,7 +35,7 @@
   import Frame from '../Frame/Frame.svelte';
   import { getSettings } from '../../contexts/settings.js';

-  let { type, children, ...restProps }: LayerProps = $props();
+  let { type, children: childrenProp, ...restProps }: LayerProps = $props();

   let settings = getSettings();
   let layer = $derived(type ?? settings.layer);
@@ -49,7 +49,7 @@
         <Frame class="lc-debug-frame" full />
       {/if}

-      {@render children?.(props)}
+      {@render childrenProp?.(props)}
     {/snippet}
   </Canvas>
 {:else if layer === 'svg'}
@@ -60,7 +60,7 @@
         <Frame class="lc-debug-frame" full />
       {/if}

-      {@render children?.(props)}
+      {@render childrenProp?.(props)}
     {/snippet}
   </Svg>
 {:else if layer === 'html'}
@@ -71,7 +71,7 @@
         <Frame class="lc-debug-frame" full />
       {/if}

-      {@render children?.(props)}
+      {@render childrenProp?.(props)}
     {/snippet}
   </Html>
 {/if}

@baseplate-admin

hey @baseplate-admin, good catch!

I've created PR #943. Could you verify in your repo using the PR package and if all looks good I'll cut a release soon (likely tomorrow).

Hey, thanks for fast response, it works!

Navigation Menu

Repository navigation

Simplified charts crash server-side when ssr is enabled - snippet name shadows same-named $props() reference (marks/children) #940

Summary

Root cause

Reproduction

Expected

Actual

Environment

Proposed fix

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Simplified charts crash server-side when ssr is enabled - snippet name shadows same-named $props() reference (marks/children) #940

Description

Summary

Root cause

Reproduction

Expected

Actual

Environment

Proposed fix

Activity

techniq commented on Oct 12, 2026

baseplate-admin commented on Oct 12, 2026

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions