vercel / vercel/next.js

Boundary Serialization - `Props must be serializable for components in "use client" file` warning

Open
#74,343 59 comments 11 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Cache Components Linting
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.

See: https://github.com/vercel/next.js/discussions/46795

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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.