Next.js / React: Event handlers cannot be passed to Client Component props without "use client"
Error: Event handlers cannot be passed to Client Component props. <button onClick={function}>. If you need interactivity, consider converting part of this to a Client Component.
Immediate Remediation
tsx
// Add "use client" as the absolute first line of the interactive file:
'use client';
import { useState } from 'react';
export function InteractiveButton() {
const [clicked, setClicked] = useState(false);
return <button onClick={() => setClicked(true)}>Click Me</button>;
}Root Cause Analysis
Next.js App Router components default to Server Components. Server components are rendered purely on the server and cannot serialize JavaScript function references (like onClick or onChange) across the network.
Verification & Guardrails
- Place "use client" as the very first line of the file, above all imports.
- Keep Client Components at the leaves of your component tree to maximize server-side rendering benefits.
Have a custom or uncategorized crash?
Run your trace through our in-memory client privacy sandbox for instant SRE remediation.