Boundary Serialization - `Props must be serializable for components in "use client" file` warning
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.4k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
Description
Link to the code that reproduces this issue
https://github.com/inducingchaos/riley-barabash
To Reproduce
(Ignore code repro - SEE https://github.com/vercel/next.js/discussions/46795)
In my experience: just create any component in a "use client" file that accepts a function, dispatch for state, or anything that is non-serializable as props.
Current vs. Expected behavior
Current: Typescript (Next.js version) will give a warning (the title) to either a) make props serializable, or b) to postfix the prop name with 'Action'. This has led to an unnecessary amount of renamings simply to avoid this warning - where the majority of cases don't have anything to do with Server Actions at all.
Expected: No warnings when passing props unrelated to SA's or the client-server boundary, especially in cases where client components are layered.
Provide environment information
Operating System:
Platform: darwin
Arch: x64
Version: Darwin Kernel Version 24.0.0: Mon Aug 12 20:54:30 PDT 2024; root:xnu-11215.1.10~2/RELEASE_X86_64
Available memory (MB): 32768
Available CPU cores: 16
Binaries:
Node: 22.9.0
npm: 10.8.3
Yarn: N/A
pnpm: 9.12.0
Relevant Packages:
next: 15.1.1-canary.16 // There is a newer canary version (15.1.1-canary.22) available, please upgrade!
eslint-config-next: 14.2.11
react: 19.0.0-rc-603e6108-20241029
react-dom: 19.0.0-rc-603e6108-20241029
typescript: 5.6.2
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
Developer Experience, Linting, Partial Prerendering (PPR)
Which stage(s) are affected? (Select all that apply)
next dev (local)
Additional context
Didn't provide a repro because I'm lazy and I think there's enough context within the discussion thread I linked.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked reproduction repository and the Next.js Discussion #46795, then trace the warning produced during next dev for client components. Compare cases involving ordinary function props with Server Actions. Done means unrelated non-serializable props no longer produce this warning while the relevant Server Action guidance remains.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, nextjs, react, typescript
- Domain
- developer-experience, tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100