“Event handlers cannot be passed to Client Component props” even with use client

Question

I’m working on a project using Next.js 13+ with App Router, and I’m trying to pass a onCompose handler to a Sidebar component like this:

<Sidebar onCompose={handleCompose} />

But I keep getting this error:

Runtime Error (Server) Error: Event handlers cannot be passed to Client Component props. <... onCompose={function onCompose}>

I have already marked the parent component with use client and I’m dynamically importing the sidebar using:

const Sidebar = dynamic<SidebarProps>(() =>
  import('@/components/Sidebar').then(mod => mod.Sidebar), { ssr: false }
)

And in Sidebar.tsx, I already have:

export function Sidebar({ onCompose }: { onCompose: () => void }) {
  ...
}

Even with this setup, the error persists. I’ve read the official docs and this StackOverflow post, but none of the solutions helped.

👉 Here is my repo: https://github.com/zannngyn/email_classification

Any ideas how to fix this? Is this a known limitation or a misconfiguration?

Answer 1

This might be because you're passing a function (onCompose) from a Server Component to a Client Component. To pass functions like onCompose into Sidebar, you must ensure that both the parent and the child (Sidebar) are Client Components.

1- Add "use client" to the parent component (not just Sidebar).

'use client';

2- You might not need for dynamic import with ssr: false. Just import normally :

import { Sidebar } from '@/components/Sidebar';