Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

クローズ 初心者向け
  • 何か問題がありますか？
#940 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
78/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
typescript
領域
data-visualization, frontend

調査の方向性

issueに記載されている6つの簡略化されたチャートファイルと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
平均マージ
20時間 57分
マージ済み PR（30日）
17

環境構築

このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

techniq/layerchart のほかの issue

techniq/layerchart の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。