Props must be serializable for components in "use client" file

[DeveloperRyan]

Summary

I'm getting the error Props must be serializable for components in the "use client" entry file, "setMessages" is invalid., however, I am passing a setState function from a parent client component to a child client component. My understanding is that this error occurs when the child is a server component.

As seen below, both of the components are marked as client components, yet, I am still getting this error on the setMessages prop in the child component.

Additional information

parent.tsx

"use client";
import { Message } from "@prisma/client";
import React, { useState, useEffect } from "react";
import MessageInput from "./MessageInput";

type Props = {
  initialMessages: Message[];
};

export default function MessagesContainer({ initialMessages }: Props) {
  const [messages, setMessages] = useState(initialMessages);
  return (
    <div className="flex flex-col items-center justify-center h-full">
      <MessageInput messages={messages} setMessages={setMessages} conversationId={""} />
    </div>
  );
}
 

child.tsx
```tsx
"use client";
import { ConversationRole, Message } from "@prisma/client";
import React, { useState } from "react";

type Props = {
  messages: Message[];
  setMessages: (message: Message[]) => void;
  conversationId: string;
};

// The error exists on `setMessages` here
export default function MessageInput({ messages, setMessages, conversationId }: Props) {
  const [input, setInput] = useState("");

  return (
    <div>
      <input
        onKeyDown={async (e) => {
          if (e.key === "Enter") {
            setMessages(newMessage);
            setInput("");
          }
        }}
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
    </div>
  );
}

next info

    Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Pro
    Binaries:
      Node: 16.19.1
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.2.4-canary.3
      eslint-config-next: 13.2.1
      react: 18.2.0
      react-dom: 18.2.0

### Example

_No response_

[shriharip]

Happening with me too.. Request for some pointers

[eamonsheil]

Have you had any runtime errors due to this? I am have the same error but setting the value to 'any' rather than some variation of '() => void' seems to remove the error. Even without the bandaid fix I have yet to come across any errors in production either.
It's not the ideal solution, but it seems to work

[shriharip]

Yes, it is same for me. I am not having runtime errors and the functionality works just fine.
However, there is a constant message saying that props cannot be searliazed for functions.

[shuding]

You should remove "use client" from child.tsx.

A "use client" directive means that component is a boundary between server and client components. Since parent.tsx is already inside the client boundary, everything imported will be client components already. And that includes child.tsx.

Why there's this warning? Since it's a boundary, you can potentially use it in a server component. However it's not allowed to have props that can't be serialized in that case. If you import child.tsx and render it inside a server component, there's no way to pass a function as the prop.

So this warning also suggests that you should not add "use client" to every client component, but only those boundaries that are directly used in server components.

[ADTC]

@mikechabot not exactly. Server Action functions are serializable. Regular functions are not.

Although there is a separate issue of Typescript/your linter not always differentiating the two.

[wouter173]

I'm having the exact same issue at the moment, maybe an exception for functions ending in "Action" like hooks should start with "use" would be nice.

[ss-joy]

We get that this is a waring. But how can we fix this? Make the error go away?

[ADTC]

@ss-joy it's tricky to balance between having and not having 'use client' when components can be shared, but the general rule is to only have it in client components which are used in server components, but not in client components used in other client components. In other words, only in the boundary between server and client.

[eluchsinger]

It's not nice that the component should somehow know about the parent.
In this case, I would suggest using import "client-only" to make sure the component is not going to be used in a Server Component?

[Novianto778]

I have the same problem. To fix that, I change the function to the arrow function. I don't know why this can fix that problem.

[hungcrush]

I don't know why too........... it's fixed

[P233]

+1

[Hachikoi-the-creator]

to an arrow function?
I had it like this

export default function RemoveLater({ lovingit = ()=>void }){
   // . . .
}

and solved it by using it like this

export default function RemoveLater({ lovingit = function () {} }){
   // . . .
}

since the project has an standard of using funcion comps instead of arrow func comps

[TommySorensen]

@shuding Seems like this issue is still there in v13.2.5-canary.8 fx. when i use framer-motion which requires client component.

Removing the "use client" will make it fail with error TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component

[panddr]

same here

[codinginflow]

I have the same error with server actions.

I want to pass a server action as a prop to a component, as described in the documentation:

https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions#custom-invocation-without-starttransition

Edit: I actually only get the lint error, it works at runtime.

[sturmenta]

my error was using a index.ts file under the components folder to export all for a "cleaner" import, so I have to delete it and import each component direct to his file (add "use client" in the index file was not a good option)

before:

import { CurrentStep, ImagePicker } from "@/components/ui"

after:

import { CurrentStep } from "@/components/ui/current-step"
import { ImagePicker } from "@/components/ui/image-picker"

[ctretyak]

If you have index.ts file that re-exports your component, you have to set "use client" in index.ts instead of component's file