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.

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

[preitinger]

I agree that this is bad. And even more confusing: if you change the declaration from
setMessages: (message: Message[]) => void;
to
setMessages(message: Message[]): void;

then, there is no warning.

Is it really that 'use client' shall only be used for components that the "outmost" client components wrapped immediately in a server component? Then, this is a contradiction to my understanding that 'use client' is to declare that the file is going to use states, effects, or the like that are only available in client components.
If this is not clearly defined, then it is a design problem in my opinion.

[alexbaileyuk]

It's crazy to me that this worked.

setMessages: (message: Message[]) => void;
to
setMessages(message: Message[]): void;

It's very unintuitive to have such restrictions on where you can and cannot mark a file with 'use client'. Is there a reason that marking these files as 'use client' is actually a bad thing? Being aware of parent components just doesn't make any logical sense.

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

[hainguyents13]

This works for me, replace arrow function with a normal function

type Props = {
  setMessages(message: Message[]): void;
};

[ARBS-23]

It gives:

ESLint:
Avoid referencing unbound methods which may cause unintentional scoping of this.
If your function does not access this, you can annotate it with this: void, or consider using an arrow function instead.
(@typescript-eslint/ unbound-method)

[kkirby]

@ARBS-23 That's totally different and not related to this issue. Please read the documentation for that eslint error and check out the playground for invalid examples.

[preitinger]

Oh my god, reading all these linting problems I wonder if chosing Next.JS was really a good idea...

[SamJbori]

No it wasn't, NextJS is like getting married, a terrible idea but what's the alternative!

[SamJbori]

I had to remove the "use client" to remove the warning, I get the need for the warning though, the damage created by not showing the alarm is more than just an annoying yellow line, the majority of NextJS users are me, a guy who thinks Javascript is related to Java, so passing functions from Server Component to a Client Component would've resulted in so much fuzz.

[mcfry]

Bumping, this is the dumbest error.

[hainguyents13]

check my reply above

[mcfry]

Yeah, I got it resolved. My comment is more along the lines of: I shouldn't have to write all of my components that are in 'use client' files with arrow functions and/or have rigid client boundaries that discourage composition.