Next.js RSC - Breadcrumbs Error

[its-monotype]

Describe the bug Can't use Breadcrumbs inside RSC, it causes the 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..

To Reproduce https://codesandbox.io/p/sandbox/nextjs-reshaped-breadrumbs-vfp42v

Expected behavior Breadcrumbs can be used inside RSC.

Screenshots

[blvdmitry]

Still looking into why this might happen. I don't see anything very different from other compound components that we have which work in RSC environment, going to investigate further

[its-monotype]

Still looking into why this might happen. I don't see anything very different from other compound components that we have which work in RSC environment, going to investigate further

Take your time. As I understand, Breadcrumbs.Item renders as an object or smth, try to play with content inside Breadcrumbs, maybe try without compound pattern. Btw it works fine if I decompose and wrap the whole component with 'use client' so smth to do with SSR. Maybe a faulty Next.js version 😅

[its-monotype]

Maybe a faulty Next.js version 😅

Tested with Next.js (13.5.6), same thing

[blvdmitry]

It shouldn't render an object though, it returns one of the 2 component options. But removing its currently returned component does fix the error though

[blvdmitry]

Seems like this happens only when compound component assignment happens in a client component. Moving it to the index file (which is always server in Reshared) seems to fix it. Going to release a patch with this change soon

[blvdmitry]

Seems like it's rendering fine in 2.5.9, but I've also noticed that wrapping it with NextLink doesn't change the color of the item. Probably need to forward the ref for it as well

[blvdmitry]

Checked again and I think it's working right. The only thing you should care about though is that there is a difference for Next Link there:

• Ideally it should only be used in a client component since that part enables the client-side navigation and passes onClick down to the child component (seems like changing the default NextLink behavior that always creates a wrapper was exactly about the RSC use case)
• Non client component seems to also work but it doesn't pass the props down to the Item then so Link doesn't get the regular styles in that case

[its-monotype]

I tested it successfully in 2.5.9. Here is what I came up with to use with NextLink. Please let me know if you have any suggestions on how to improve it. Additionally, have you thought about incorporating the asChild pattern? It might simplify these use cases.

[blvdmitry]

Going to look into this for the next release

[blvdmitry]

Created a separate ticket for this