mirror of
https://github.com/vercel/next.js.git
synced 2026-09-20 02:25:18 +08:00
Hendrik Liebau
22daa8edc5
When a server function closes over another function (without a server directive), React will fail to serialize the function. For server-side usages (e.g. a `"use cache"` function that's called during rendering), we did show the error in the dev overlay, but without a useful stack and without an error source. For client-side usages (i.e. a server function passed to a client component) we didn't show an error at all initially, and only after triggering the server function the error was shown. With this PR, we're now showing a proper error in the dev overlay for both cases: <img width="537" alt="Screenshot 2024-12-03 at 11 56 30" src="https://github.com/user-attachments/assets/0af4b120-07c2-4266-8d5c-0b29a89abc6d"> For the client-side usage, we need to lean on the console replaying feature to make this work. In addition, the compiler now also tracks closed-over function declarations, and not only arrow expressions. For functions or arrow expressions that are not passed in as arguments/props, but are declared in the parent scope of the server function, we could even emit a build error as a follow-up PR.
15 lines
265 B
TypeScript
15 lines
265 B
TypeScript
'use client'
|
|
|
|
import { useActionState } from 'react'
|
|
|
|
export function Client({ getValue }) {
|
|
const [result, formAction] = useActionState(getValue, 0)
|
|
|
|
return (
|
|
<form action={formAction}>
|
|
<p>{result}</p>
|
|
<button>Submit</button>
|
|
</form>
|
|
)
|
|
}
|