Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đã đóng Phù hợp với người mới
  • Có gì không ổn?
#940 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
78/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
typescript
Lĩnh vực
data-visualization, frontend

Hướng nghiên cứu

Bắt đầu với sáu tệp biểu đồ đơn giản hóa được liệt kê trong issue và layers/Layer.svelte; so sánh cách giải cấu trúc prop của chúng với quy ước childrenProp hiện có được đề cập trong issue. Tái hiện lỗi bằng ví dụ biểu đồ SvelteKit được cung cấp với ssr, sau đó kiểm tra xem quá trình kết xuất phía máy chủ có tạo ra markup biểu đồ mà không bị đệ quy hoặc TypeError hay không. Issue có một bản vá đổi tên được đề xuất đầy đủ để hướng dẫn các thay đổi.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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}
Ngôn ngữ chính
TypeScript
Star
1.4k
Fork
44
Merge trung bình
20 giờ 57 phút
Pull request đã merge (30 ngày)
17

Chuẩn bị môi trường

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của techniq/layerchart

Tất cả issue của techniq/layerchart

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.