Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta Adatta ai principianti
  • Qualcosa non va?
#940 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
78/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
typescript
Ambito
data-visualization, frontend

Direzione di ricerca

Inizia con i sei file di grafici semplificati elencati nell’issue e layers/Layer.svelte; confronta la destrutturazione delle loro prop con la convenzione esistente childrenProp menzionata nell’issue. Riproduci il problema con l’esempio di grafico SvelteKit fornito usando ssr, poi verifica che il rendering lato server produca il markup del grafico senza ricorsione né un TypeError. L’issue include una patch completa di rinomina proposta per guidare le modifiche.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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}
Lingua principale
TypeScript
Stelle
1.4k
Fork
44
Merge medio
1g 40m
PR unite (30g)
14

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di techniq/layerchart

Tutte le issue di techniq/layerchart

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.