vitejs / vitejs/vite-plugin-react
Transform inline "use server" functions inside file-level "use server" files
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.2k
- Forks
- 269
- Avg merge
- 1d 3h
- Merged PRs (30d)
- 19
Description
The composability issue of file directive and inline directive is hinted in https://github.com/vitejs/vite-plugin-react/issues/1336 for use server/cache, but this is already an issue with same use server directives. Before jumping too focused on use server/cache composition, we should evaluate the design for use server separately.
It may be a low priority if it's not used in practice, but it's good to be aware that there's a general Next.js transform approach divergence.
EDIT: It turned out Next.js doesn't support fully due to runtime side issue:
https://github.com/hi-ogawa/reproductions/tree/main/next-rsc-returned-nested-action
Description
The built-in Server Function transform currently chooses between handling a module-level "use server" directive and handling inline "use server" directives. When a file has the module directive, it wraps the module exports but does not hoist and register explicitly annotated local functions inside those exports.
For example:
'use server'
export async function outer() {
async function inner() {
'use server'
return 'inner result'
}
return inner
}
outer is exported and inherits the module-level role. inner is local, so it does not inherit that role, but its own inline directive explicitly declares it as a Server Function. The expected result is that outer and inner are independently registered Server Functions and that calling outer can return inner as a serializable server reference.
The current transform registers only outer. It leaves inner as an ordinary nested function, including the inert directive string in its body. Returning that function through React therefore does not produce a registered server reference.
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 built-in Server Function transform and trace how it handles module-level versus inline "use server" directives. Use the example in the issue as the reproduction, then inspect existing transform coverage if available. Done means both outer and inner are independently registered Server Functions and returning inner produces a serializable server reference.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- build-system
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 50/100