Can't pass server component to PropTypes.node

[Janpot]

trafficstars

Nesting a server component inside a client component that has PropTypes.node defined for its children results in a warning:

Warning: Failed prop type: Invalid prop `children` supplied to `WithPropTypes`, expected a ReactNode.

Reproduction: https://stackblitz.com/edit/stackblitz-starters-tn6djg?file=app%2Fpage.tsx

[ljharb]

Since when can a component be an async function?

[Janpot]

Since when can a component be an async function?

I guess since Next.js started supporting React server components. Assuming you're not looking for an exact date 😄

[Janpot]

Actually, just noticed the same happens when rendering lazy components as children

const MyLazyComponent = React.lazy(() => import('./Component'));

[oliviertassinari]

I think we should also check that propTypes.element works.

For the root of the issue, we might want to check that isValidElement works:

https://github.com/facebook/prop-types/blob/1c9c6311c1fb8778bffc7a1ca70c273ee8a8654d/factoryWithTypeCheckers.js#L486

https://react.dev/reference/react/isValidElement

[ljharb]

I’m pretty sure that hasn’t been released in react proper, and next.js just jumped the gun.

I’ll try to look into it, though, since it’s likely that they’re all the same issue.

[Janpot]

I think we should also check that propTypes.element works.

~If I understand the concept correctly, server components themselves can't pass the server/client boundary. Only rendered elements. So you might not have to support async functions propTypes.element just yet.~

Forget it, I'm glitching out, this is nonsense.