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.

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

[gaearon]

It doesn't have anything to do with "being aware of parent components". It just means that this component is committing to keeping its props as serializable as part of its public API. If you don't want that, remove 'use client' and it'll work just fine when imported from other client files. You can also think of 'use client' as "export to server".

[gaearon]

For people who feel stuck, see #74343 (comment)

[SorooshGb]

What if the function prop is optional and I want to reuse the component inside Server Components without passing that function prop?
In that case if I remove "use client" from the component the app won't run, and if I don't remove "use client" I will get the TypeScript error :)

[gaearon]

The comment I linked to above yours starts by answering this exact question so please do check it out!

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

[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

[nicolas-zozol]

It's just a linting trick, it don't really resolve the problem. In most of your case, it will work becuse you are not at the boundary.
The danger is that when a more complex situation will work on dev mode, but not on prod

[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

[gaearon]

The linter is pointing out that you won't be able to pass onDismiss to it. See #74343 (comment).

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

[inducingchaos]

+1 on annoying and should be fixed. You can't pass state setters as props in a "use client" file without getting this error, or renaming things to include "action". I think the linting could at least be a little more intelligent.

[honey32]

Trying to clear up a confusion;

This warning seems unreasonable and it doesn't seem to occur now. (in my env only?) (TypeScript 5.6.3, Next.js 15.1.0, React 19.0.0)

And I agree with the absence of this type warning, and disagree with highlighted answer which is made in the past: #46795 (comment)

When it comes to Atom-ic Components like Input, Button, etc., they should be available also in Server Components (by adding "use client") even though they have state or lifecycle inside. Then, the behavior align to which of normal HTML Elements like input , button, etc.

For example it is unreasonable if SubmitButton cannot be marked by "use client", even if ComponentPropsWithRef and props are replaced with explicit onSomething prop declaration.

It is intended to work both with and without explicit event handler (just like HTML Standard form-button association or something like popovertarget attr)

// src/app/boundary/_components/submit-button.tsx
"use client";

import type { ComponentPropsWithRef, FC } from "react";
import { useFormStatus } from "react-dom";

type Props = ComponentPropsWithRef<"button">;

export const SubmitButton: FC<Props> = (props) => {
  const { pending } = useFormStatus();

  return <button {...props} disabled={pending || props.disabled} />;
};

This component can be used in Server Component like below. (adding onClick={() => window.alert("submit!!")} to both buttons cause build-time error.)

// src/app/boundary/server/page.tsx
import "server-only"; // not needed but i wrote this for self-contained-ness

import { SubmitButton } from "../_components/submit-button";
import { createReservation } from "../_actions/create-reservation";

export default function Page() {
  return (
    <form action={createReservation}>
      {/* ... */}
      <button type="submit">Submit</button>
      <SubmitButton type="submit">Submit</SubmitButton>
    </form>
  );
}

And, it is natural if similar form components with onClick event handler is valid.

// src/app/boundary/client/page.tsx
"use client"

import { SubmitButton } from "../_components/submit-button";
import { createReservation } from "../_actions/create-reservation";

export default function Page() {
  return (
    <form action={createReservation}>
      {/* ... */}
      <button type="submit" onClick={() => window.alert("submit!")}>
        Submit
      </button>
      <SubmitButton type="submit" onClick={() => window.alert("submit!")}>
        Submit
      </SubmitButton>
    </form>
  );
}

[inducingchaos]

@shuding or others, hate to pester but can we get an update on this one?

This seems like a moderately easy fix (with enough feedback for change) and I'm sick of having to postfix all of my prop names with 'Action' - even when they have nothing to do with Server Actions.

This is one of those issues that is small but significant. The Next.js version of Typescript is really, really helpful, but this one thing needs to be ripped from that code or adjusted somehow.

Thank you.

[inducingchaos]

Opened #74343

[ftzi]

Can this warning be disabled, as it's useless?