Bug: Children.map raises error when passed async server component within client component

[mfosterw]

React version: 14.1.4

Steps To Reproduce

1. In a Next.js app or another framework that uses React server components, create an async server component called Child
2. Create a client component called Client which accepts the children prop and returns Children.map(children, (child) => child)
3. Create a server component called Parent, and return Child inside Client

Link to code example: https://codesandbox.io/p/devbox/broken-water-4kktmz

The current behavior

Raises Error: Objects are not valid as a React child (found: object with keys {$$typeof, _payload, _init}). If you meant to render a collection of children, use an array instead.

The expected behavior

Returns an unresolved Promise representing the child.

[TheJarX]

This is just a comment; just trying to note that the documentation includes some alternatives to Children. Did you try with any of those alternatives?

https://react.dev/reference/react/Children#alternatives

[mfosterw]

This issue actually arose for me through a Mantine component calling Children.toArray. Here is the code, and if you can think of an alternative way to do what they're doing I can try to suggest it. It seems to me like there's no good alternative for the use case.

[LuBustos]

@mfosterw
I am using next v14.2.0 and it works well, try updating your next version and check if it works.

[mfosterw]

Updating Nextjs fixed it, thanks @LuBustos!