TanStack / TanStack/form

svelte, angular and lit adapters have no SSR-safe default formId

Open
#2,388 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
6.7k
Forks
682
Avg merge
5d 18h
Merged PRs (30d)
7

Description

FormApi falls back to uuid() when no formId is passed:

// packages/form-core/src/FormApi.ts
this._formId = opts?.formId ?? uuid()

That value is random per instance, so the server render and the client render disagree on it. Binding it (id={form.formId}) then produces a hydration mismatch.

React and Preact have always passed an SSR-safe id. #2259 and #2263 added one for Vue and Solid. Three adapters still pass options straight through and never supply a fallback:

Adapter SSR-safe default formId
react-form yes, React.useId
preact-form yes, useId
vue-form yes, since #2259
solid-form yes, since #2263
svelte-form no
angular-form no
lit-form no

grep -r formId packages/<adapter>/src returns nothing for those three, and each returns the FormApi instance directly, so form.formId is reachable from user code.

SvelteKit is the case I'd worry about, since SSR is on by default there.

Before I send anything: do you want the same treatment for these three? Svelte is the awkward one. $props.id() needs Svelte 5.20 while the peer range is ^5.0.0, and it is a compile-time rune so it cannot be feature-detected off the namespace the way vue-form does with Vue.useId. I would rather agree on the approach than guess. Happy to leave angular and lit out if their hydration does not care about a mismatched id.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with packages/form-core/src/FormApi.ts and inspect the Svelte, Angular, and Lit adapter sources under their packages//src directories. Compare how React, Preact, Vue, and Solid provide SSR-safe formId values. Done means the affected adapters have an agreed SSR-safe approach that avoids server/client hydration mismatches, including a compatibility decision for Svelte.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.