CODEWITHSUNDEEP
reactjstypescriptnext.jsreact-props
Ali Baghban
Ali Baghban

Reputation: 695

Props must be serializable for components in the "use client" entry file, "setShow" is invalid.ts(71007)

I am getting this Typescript warning/error in my vs code editor for some prop-namings in React.

Props must be serializable for components in the "use client" entry file, "setShow" is invalid.ts(71007)

for example:

const ComponentName = ({ show, setShow }: IComponentName) => {
...
Component logic    
...
}

In which, setShow is a function to update the state, being passed from the parent to the child.

But the project gets built successfully.

why does TS throw warnings for some naming on the props? What is the problem with name setShow as prop name? And How to make TS not to throw warning/error for these namings?

Upvotes: 2

Views: 1580

Answers (3)

Yogi
Yogi

Reputation: 1722

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.

In my case, I've to remove "use client" from child component resolves the error

Source

Upvotes: 0

emeraldsanto
emeraldsanto

Reputation: 4741

The props of your top-level client component, here referred to as use client entry file, need to be serialized to be sent over the network from the server to the client where the code will be executed.

This is typically done by using JSON to serialize props for the client, which doesn't have a way to represent data types such as functions, Set, Map, etc. In this case, Next.js (or React) is warning you that the value of setProps (a function) is not serializable and thus is considered an invalid prop.

In this instance, it probably works regardless because another parent component is marked with use client, which makes this message in the child irrelevant.

Upvotes: 0

Hai Nguyen
Hai Nguyen

Reputation: 331

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

❌ instead of:

type Props = {
  setShow: (status: boolean) => void; 
};

✅ use this:

type Props = {
  setShow(status: boolean): void; 
};

Upvotes: 10

Related Questions