Skip to content

fix(svelte-form): resolve infinite recursion in AppField during SSR#2093

Open
pixelmund wants to merge 2 commits intoTanStack:mainfrom
pixelmund:fix/svelte-appfield-ssr-recursion
Open

fix(svelte-form): resolve infinite recursion in AppField during SSR#2093
pixelmund wants to merge 2 commits intoTanStack:mainfrom
pixelmund:fix/svelte-appfield-ssr-recursion

Conversation

@pixelmund
Copy link

@pixelmund pixelmund commented Mar 24, 2026

🎯 Changes

Fixes #1992

In AppField.svelte, the children prop destructured from $props() is shadowed by the {#snippet children(field)} block. This causes children={children} passed to <InnerAppField> to reference the snippet wrapper instead of the original prop, creating an infinite render loop during SSR.

Renamed the destructured prop to childrenProp to avoid the naming collision.

✅ Checklist

  • I have followed the steps in the Contributing guide.
  • I have tested this code locally with pnpm test:pr.

🚀 Release Impact

  • This change affects published code, and I have generated a changeset.
  • This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

Bug Fixes

  • Fixed an infinite recursion error that occurred during server-side rendering in AppField. This bug prevented applications from rendering correctly when server-side rendering was enabled. The patch resolves this critical issue, ensuring stable and reliable SSR performance for all Svelte Form implementations in production.

@coderabbitai
Copy link

coderabbitai bot commented Mar 24, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 4ea322a4-4628-42a9-8998-ae5ba8205126

📥 Commits

Reviewing files that changed from the base of the PR and between e21cc01 and 03f7db8.

📒 Files selected for processing (2)
  • .changeset/loose-garlics-fetch.md
  • packages/svelte-form/src/AppField.svelte

📝 Walkthrough

Walkthrough

A patch release for @tanstack/svelte-form fixes an infinite recursion issue during SSR in the AppField component. The root cause was the children prop being shadowed by destructuring, which the fix resolves by renaming the destructured prop to childrenProp.

Changes

Cohort / File(s) Summary
Release Configuration
.changeset/loose-garlics-fetch.md
Adds changeset entry documenting a patch release addressing infinite recursion during SSR caused by children prop shadowing in AppField.
Bug Fix
packages/svelte-form/src/AppField.svelte
Renames destructured children prop to childrenProp to eliminate shadowing conflict and prevent infinite recursion. InnerAppField now receives childrenProp instead of the shadowed children.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Poem

🐰 A shadow haunted AppField's heart,
Causing stacks to fall apart,
But renaming saved the day so bright,
Now children render, pure and light!
SSR flows with grace anew. ✨

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main fix - resolving infinite recursion in AppField during SSR, which is the primary change in this pull request.
Description check ✅ Passed The description is comprehensive, includes the linked issue reference, explains the root cause and fix clearly, and shows all checklist items completed with appropriate selections.
Linked Issues check ✅ Passed The code changes directly address the infinite recursion issue #1992 by renaming the shadowed children prop, which eliminates the SSR stack overflow that prevented form composition from working.
Out of Scope Changes check ✅ Passed All changes are scoped to fixing the infinite recursion issue - a prop rename in AppField.svelte and a corresponding changeset entry, with no unrelated modifications.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@nx-cloud
Copy link

nx-cloud bot commented Mar 25, 2026

View your CI Pipeline Execution ↗ for commit 03f7db8

Command Status Duration Result
nx affected --targets=test:sherif,test:knip,tes... ✅ Succeeded 38s View ↗
nx run-many --target=build --exclude=examples/** ✅ Succeeded 3s View ↗

☁️ Nx Cloud last updated this comment at 2026-03-25 07:00:29 UTC

@pkg-pr-new
Copy link

pkg-pr-new bot commented Mar 25, 2026

More templates

@tanstack/angular-form

npm i https://pkg.pr.new/@tanstack/angular-form@2093

@tanstack/form-core

npm i https://pkg.pr.new/@tanstack/form-core@2093

@tanstack/form-devtools

npm i https://pkg.pr.new/@tanstack/form-devtools@2093

@tanstack/lit-form

npm i https://pkg.pr.new/@tanstack/lit-form@2093

@tanstack/react-form

npm i https://pkg.pr.new/@tanstack/react-form@2093

@tanstack/react-form-devtools

npm i https://pkg.pr.new/@tanstack/react-form-devtools@2093

@tanstack/react-form-nextjs

npm i https://pkg.pr.new/@tanstack/react-form-nextjs@2093

@tanstack/react-form-remix

npm i https://pkg.pr.new/@tanstack/react-form-remix@2093

@tanstack/react-form-start

npm i https://pkg.pr.new/@tanstack/react-form-start@2093

@tanstack/solid-form

npm i https://pkg.pr.new/@tanstack/solid-form@2093

@tanstack/solid-form-devtools

npm i https://pkg.pr.new/@tanstack/solid-form-devtools@2093

@tanstack/svelte-form

npm i https://pkg.pr.new/@tanstack/svelte-form@2093

@tanstack/vue-form

npm i https://pkg.pr.new/@tanstack/vue-form@2093

commit: 03f7db8

@sentry
Copy link

sentry bot commented Mar 25, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 83.11%. Comparing base (6892ed0) to head (03f7db8).
⚠️ Report is 158 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #2093      +/-   ##
==========================================
- Coverage   90.35%   83.11%   -7.24%     
==========================================
  Files          38        8      -30     
  Lines        1752       77    -1675     
  Branches      444        4     -440     
==========================================
- Hits         1583       64    -1519     
+ Misses        149       12     -137     
+ Partials       20        1      -19     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@LeCarbonator
Copy link
Contributor

Don't mind the failing version preview. We'll try to get that handled ASAP.

As far as the actual changes go, LGTM!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Svelte-Form: Maximum call stack size exceeded when using form composition.

2 participants