TanStack / TanStack/form

Subscribe errors with NaN

Open
#1,348 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Describe the bug

The library actually works fine but Next.js shows an error in the bottom left corner and It's annoying, functionality is not affected AFAICT.

This only happens when I use NaN as defaultValue and then try to Subscribe to the value, it doesn't when using a empty string, it also works with zero as defaultValue.

What are the general recommendation about defaultValues ?

Image
Image

Call Stack createUnhandledError ../../node_modules/next/src/client/components/errors/console-error.ts (18:35) handleClientError ../../node_modules/next/src/client/components/errors/use-error-handler.ts (31:33) console.error ../../node_modules/next/src/client/components/globals/intercept-console-error.ts (32:26) mountSyncExternalStore ../../node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (5533:20) Object.useSyncExternalStore ../../node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js (23063:16) exports.useSyncExternalStore ../../node_modules/next/dist/compiled/react/cjs/react.development.js (1231:34) exports.useSyncExternalStoreWithSelector ../../node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js (82:19) useStore ../../node_modules/@tanstack/react-store/src/index.ts (23:17) LocalSubscribe ../../node_modules/@tanstack/react-form/src/useForm.tsx (132:16) useForm.useState ../../node_modules/@tanstack/react-form/src/useForm.tsx (198:9) MyForm app/example/form.tsx (129:15) Page app/example/page.tsx (28:7)
Your minimal, reproducible example

https://github.com/pedro757/form-subscribe-error-NaN

Steps to reproduce
  1. bun dev
  2. See the error in the bottom left corner
Expected behavior

Not displaying the error

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform
  • OS: Linux
  • Browser: Chromium
  • Browser Version: 134
TanStack Form adapter

react-form

TanStack Form version

v1.1.2 sandbox is latest

TypeScript version

v5.8.2

Additional context

No response

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 the linked minimal reproduction by running bun dev, then inspect the reported paths app/example/form.tsx and app/example/page.tsx around the subscription using NaN as the default value. Compare this behavior with an empty string or zero and verify that subscribing no longer produces the Next.js client error.

Written by the indexing model from the issue text.

Assessment

Tech stack
bun, next.js, react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.