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

[ryandotelliott]

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.

[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?

[OrhanTozan]

I agree with @icazemier.

This is bad.

This is bad, because it prevents client components from being reusable. Seems like the first big design flaw that NextJS has.

I think marking every component with "use client" should be the way. The NextJS framework should be able to figure out itself where the boundary is. This way, reusability is not stripped away.

[2-fly-4-ai]

I agree with @icazemier.

This is bad.

This is bad, because it prevents client components from being reusable. Seems like the first big architectural/design issue NextJS has.

I think marking every component with "use client" should be the way. The NextJS framework should be able to figure out itself where the boundary is. This way, reusability is not stripped away.

Yes. This is not smart at all. Client components should all be labeled as such.

[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

[DaehoKwag]

'use client'

const YourComponent = () => {
// ...
}

export default YourComponent

it's working. but i dont know why, too...............

[juliansommer]

yeah for whatever reason making the component an arrow function instead of function fixed the warning? very very strange behaviour

[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

[JSONRice]

This is not a good idea. What if you have other components in your directory. This will re-export everything client side and you'll miss out on server side rendering optimizations. This suggestion above worked for me.

[shanehoban]

I get this when using a version of TS in vscode imported from node_modules but not when using the TS that is bundled with vscode.

They are the same version.

I use the node_modules TS as it is required to enable the package ts-plugin-sort-import-suggestions to run, which allows to sort the vscode auto imports... which is completely unrelated but how weird!

All in all, I'd say the warning is relatively safe to ignore.

[jrnxf]

@shanehoban because when you use the node modules version it comes with the nextjs typescript plugin

https://www.youtube.com/watch?v=pqMqn9fKEf8

[joeshub]

seems it would be really helpful for the Next TS Plugin to nag you when you need to use import "client-only";

[kkirby]

After investigating what triggers this TypeScript warning, I found that it's based on the following criteria:

• Does the file contain a "use client" directive?
• Does it export a React component?
• Does that component have any non-serializable properties?

These checks seem overly simplistic and don't appear to consider the nuances of crossing server and client boundaries. This could explain why the warning was downgraded from an error.

In my opinion, it might be more effective to reframe this as a notice instead of a warning. Something along the lines of: "Just a heads-up: These props are non-serializable. You won't be able to use them in a server component. Make sure to use this component within a client-only context." This approach would offer more clarity and context. As it stands, the current warning feels somewhat cryptic and might confuse developers unfamiliar with the specifics of client/server interactions in React.