[React 19] Bug: `cloneElement` in client component with async server component as children not working

[darthmaim]

React version: 19

Steps To Reproduce

1. Clone the reproduction
2. npm i
3. npm run dev
4. Open http://localhost:3000/ and observe error

Link to code example: https://github.com/darthmaim-reproductions/vercel-next.js-72034

The current behavior

When using cloneElement in a client component, and the children is an async server component, this error is thrown:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of ClientComponent.

When the server component is not async (or a client component), this just works.

Additionally, adding this line to the client component also makes this work:

if(children.$$typeof === Symbol.for('react.lazy')) { children = use(children._payload); }

The expected behavior

Since cloneElement works for client components and non-async server components, I expected this to work with async server components as well.

Additional context

With react 18 the children was reported as <Lazy/> in react-dev-tools and cloneElement was working, now it is shown as { $$typeof: Symbol(react.lazy) } (when not using cloneElement to avoid the error).

I initially reported this is in the Next.js repo (vercel/next.js#72034), but I keep running into this bug and suspect its a react bug and not related to Next.js.

[umeshyadav7988]

Hey @darthmaim,

Thanks for reporting this issue!

It seems like React 19 handles async server components differently when passed as children to cloneElement. Given that in React 18, the component was recognized as <Lazy/> in dev tools but now appears as { $$typeof: Symbol(react.lazy) }, this suggests a potential change in how React processes async components internally.

Your workaround using:

if (children.$$typeof === Symbol.for('react.lazy')) {
children = use(children._payload);
}

suggests that React is treating async server components differently than expected, and cloneElement isn't automatically resolving them.

Some potential questions to investigate further:

• Is this an intentional change in React 19, or an unintended regression?
• Could cloneElement be enhanced to handle async server components, or should this be explicitly managed by developers?
• Does this affect any other React APIs that interact with async server components?

[jlking18333]

This is my account originally and was done fraudulent

[darthmaim]

Hey @jlking18333 / @umeshyadav7988,

please contact GitHub support to sort out your account issues, this is the react repository.

[dackmin]

Chiming in just to say that the workaround works great but is a bit cumbersome when you have a LOT of server/client inter-dependencies 🥲.
If it's by design, maybe use should be called directly by cloneElement. And at the very least, all of this should be documented in the 18 -> 19 migration docs 😔

[darthmaim]

FYI, the workaround stopped working for me in some specific cases with Next.js 15.3.1 (see vercel/next.js#72034 (comment)).

Edit: The workaround started working again with Next.js 15.3.3

[sebmarkbage]

cloneElement is basically soft deprecated. It works against any ability to optimize by inlining. One form of inlining is Server Components so it's hard for the client to see what it observes.

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[coderrshyam]

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got:
undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named > imports.
Check the render method of ClientComponent.

In my case instead of ClientComponent, I got Tutorial Layout.:

[browser] Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `TutorialLayout`.
    at createFiberFromTypeAndProps (file://C:/Code Playground/portfolio/.next/dev/static/chunks/8ebc4_next_dist_compiled_react-dom_932b37c6._.js:3192:32)
    at createFiberFromElement (file://C:/Code Playground/portfolio/.next/dev/static/chunks/8ebc4_next_dist_compiled_react-dom_932b37c6._.js:3203:16)
    at createChild (file://C:/Code Playground/portfolio/.next/dev/static/chunks/8ebc4_next_dist_compiled_react-dom_932b37c6._.js:4040:40)
    at reconcileChildrenArray (file://C:/Code Playground/portfolio/.next/dev/static/chunks/8ebc4_next_dist_compiled_react-dom_932b37c6._.js:4153:72)
    at reconcileChildFibersImpl (file://C:/Code Playground/portfolio/.next/dev/static/chunks/8ebc4_next_dist_compiled_react-dom_932b37c6._.js:4260:117)
    at <unknown> (file://C:/Code Playground/portfolio/.next/dev/static/chunks/8ebc4_next_dist_compiled_react-dom_932b37c6._.js:4287:39)
    at reconcileChildren (file://C:/Code Playground/portfolio/.next/dev/static/chunks/8ebc4_next_dist_compiled_react-dom_932b37c6._.js:5909:51)
    at beginWork (file://C:/Code Playground/portfolio/.next/dev/static/chunks/8ebc4_next_dist_compiled_react-dom_932b37c6._.js:6750:101)
    at runWithFiberInDEV (file://C:/Code Playground/portfolio/.next/dev/static/chunks/8ebc4_next_dist_compiled_react-dom_932b37c6._.js:960:74)
    at performUnitOfWork (file://C:/Code Playground/portfolio/.next/dev/static/chunks/8ebc4_next_dist_compiled_react-dom_932b37c6._.js:9488:97)
    at workLoopConcurrentByScheduler (file://C:/Code Playground/portfolio/.next/dev/static/chunks/8ebc4_next_dist_compiled_react-dom_932b37c6._.js:9484:58)
    at renderRootConcurrent (file://C:/Code Playground/portfolio/.next/dev/static/chunks/8ebc4_next_dist_compiled_react-dom_932b37c6._.js:9467:71)
    at performWorkOnRoot (file://C:/Code Playground/portfolio/.next/dev/static/chunks/8ebc4_next_dist_compiled_react-dom_932b37c6._.js:8994:150)
    at performWorkOnRootViaSchedulerTask (file://C:/Code Playground/portfolio/.next/dev/static/chunks/8ebc4_next_dist_compiled_react-dom_932b37c6._.js:10156:9)
    at MessagePort.performWorkUntilDeadline (file://C:/Code Playground/portfolio/.next/dev/static/chunks/8ebc4_next_dist_compiled_099f7c81._.js:3290:64)
    at ErrorPage (file://C:/Code Playground/portfolio/.next/dev/static/chunks/src_aadfe235._.js:234:327)
    at ErrorBoundaryHandler.render (file://C:/Code Playground/portfolio/.next/dev/static/chunks/8ebc4_next_dist_client_2a514c8e._.js:2339:55)
    at ErrorBoundary (file://C:/Code Playground/portfolio/.next/dev/static/chunks/8ebc4_next_dist_client_2a514c8e._.js:2356:50)
    at OuterLayoutRouter (file://C:/Code Playground/portfolio/.next/dev/static/chunks/8ebc4_next_dist_8350a9a9._.js:626:55) (file://C:/Code Playground/portfolio/.next/dev/static/chunks/src_aadfe235._.js:48:25)

You can see by navigating from https://coderrshyam.vercel.app/tutorials/javascript to any other route like https://coderrshyam.vercel.app/about.