NextJS 15.4.1 && 15.4.2 - Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

[albertocubeddu]

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Unfortunately I cannot reproduce with a fresh installation of nextJS, however as soon as i go into our AUTH page(s), this happen and the system crash. Posting here just trying to index this error on google, and hopefully having somebody else like me having the same issue.

1. Works perfectly with 14.4.0 (The version published by error) and nextjs 14.3.x
2. Works with pnpm dev (VERY SCARY, has we had production down for more than 2 minutes!!)
3. Do not work if pnpm build && pnpm start
4. Do not work in production

The only error we're getting is:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

[albertocubeddu]

Error: Minified React error #130; visit https://react.dev/errors/130?args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at ro (1cdcae31-39369f206cbd9e19.js:1:34063)
at d (1cdcae31-39369f206cbd9e19.js:1:42977)
at 1cdcae31-39369f206cbd9e19.js:1:45646
at u (1cdcae31-39369f206cbd9e19.js:1:45935)
at 1cdcae31-39369f206cbd9e19.js:1:47017
at ow (1cdcae31-39369f206cbd9e19.js:1:68906)
at oW (1cdcae31-39369f206cbd9e19.js:1:84912)
at ib (1cdcae31-39369f206cbd9e19.js:1:114758)
at 1cdcae31-39369f206cbd9e19.js:1:114603
at iv (1cdcae31-39369f206cbd9e19.js:1:114611)
at io (1cdcae31-39369f206cbd9e19.js:1:111694)
at iY (1cdcae31-39369f206cbd9e19.js:1:133010)
at MessagePort.x (3982-258acaef57de46b4.js:18:51438)

Frontend error; 

[EthanDDay]

I have the exact same issue, it works fine in localhost, one particular page has this error only in our vercel preview deployments (have not tried a production deployment due to this error). Next 15.4.2, worked fine previously on 14.

[albertocubeddu]

Same issue with the latest 15.4.3

[albertocubeddu]

@EthanDDay after 8 hours of building/debugging i finally found the culprit (for me):

React.cloneElement

[EthanDDay]

@EthanDDay after 8 hours of building/debugging i finally found the culprit (for me):

React.cloneElement

This was the issue, thank you so much. Refactored to use context as a replacement in our case.

[icyJoseph]

Hi, how was this the issue? Could you guys share a bit more so that we can extend our knowledge base?

[albertocubeddu]

@icyJoseph Not much more to share. I've spent 8 hours just removing random stuff until i identified that cloneElement was the instruction causing the 500.

Use the latest version of NextJS, try to use that functionality from React and do pnpm run build (as it works on dev)
and you should be able to reproduce the issue.

[icyJoseph]

Right - I wonder if this is because when crossing the server->client boundary, using cloneElement, isValidElement, etc, might receive a reference to data that'll come in later on.

Client components applying cloneElement, isValidElement, etc to other Client components should work fine, I think.

This explanation here, https://overreacted.io/progressive-json/#outlining, is for data, but when applied for a component tree, you could think of the component data being replaced by an outline (reference) -

See this other issue: facebook/react#32392

[Scrumplex]

I have written a minimal reproduction sample here: https://codesandbox.io/p/devbox/n9rftd

Some takeaways:

• This issue only occurs, if I have a <Suspense> boundary, containing a server component (be it sync or async) that in turn has a client component that does cloneElement on another client component.
• Additionally, this only appears after a certain amount of components. In my production app, it takes four table rows to trigger this. In my repro example, it takes over 50.
• This exclusively happens with production builds.
• When this issue does NOT appear, children.'$$typeof' is Symbol(react.transitional.element), whereas when this issue happens it is Symbol(react.lazy)

This smells like some aggressive optimization.

[Scrumplex]

Still reproducible with 15.4.6

[Scrumplex]

I filed an issue for this, as it's a reproducible bug #82527

[jakubjanousek]

we just had a similar issue (not sure if same):

• downgrading to 15.3.2 didn't help
• ours was happening only if one of the props (string) sent to React.cloneElement was too long

[maltesa]

We ran into the same issue in production where Elements using asChild implemented with Radix Slots (which uses cloneElement under the hood) were vanishing. The behavior only occurs in production builds (webpack and turbopack) and is very unstable there. To me it's not clear when nextjs passes a react.transitional.element (works, was always the case with next <= 14.4.0) or a react.lazy (does not work, sometimes the case with next > 14.4.0) into the client component.

I recorded a video of the issue where I isolated the problem as good as possible in a blank project:
https://www.tella.tv/video/radix-slot-vs-nextjs-greater-1441-fhm9

[icyJoseph]

IIRC this is a React thing. The high level is described here, https://overreacted.io/progressive-json/#outlining

[maltesa]

You're right. I understand that the actual issue is a react one.

The issue I see with nextjs is that the behavior is different between dev and prod. Is there a way to fix this? I do not fully understand why there is a difference between dev and prod.