Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

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

未关闭 适合新手
  • 哪里不对？
#940 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
2/5
预计耗时
1-3 小时
新手友好度
78/100
Issue 类型
缺陷
描述清晰度
描述清楚
活跃度
活跃
技术栈
typescript
领域
data-visualization, frontend

调研方向

从 issue 中列出的六个简化图表文件和 layers/Layer.svelte 开始；将它们的 prop 解构方式与 issue 中提到的现有 childrenProp 约定进行比较。使用提供的 SvelteKit 图表示例和 ssr 重现问题，然后检查服务器端渲染是否能生成图表标记，且不会发生递归或 TypeError。Issue 中包含完整的建议重命名补丁，可作为修改指南。

由索引模型根据 Issue 内容生成。

描述

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}
主要语言
TypeScript
星标
1.4k
派生
44
平均合并
1 天 40 分钟
30 天内合并 PR
14

环境准备

这个项目没有提供开发容器、Dockerfile 或贡献指南，环境需要你自己搭建：先看它的 README，通用步骤见我们的新手贡献指南。

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

techniq/layerchart 的其他 Issue

查看 techniq/layerchart 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。