[BUG] - Using Dropdown component in Next.JS throws a runtime exception

[iyxan23]

NextUI Version

^2.0.15

Describe the bug

Using the Dropdown component as stated in the docs causes a Runtime Exception when the trigger is clicked. The error itself does not provide any meaningful information for debugging: Error: Unknown element <[object Object]> in collection., so I believe this is an internal bug. Source: https://nextui.org/docs/components/dropdown

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Install NextUI as described in the docs
2. Copy the code from https://nextui.org/docs/components/dropdown#usage
3. Clicks the dropdown button
4. Raised a cryptic runtime exception Error: Unknown element <[object Object]> in collection.

Additional info: I'm using Vivaldi, a derivative of chrome.

Expected behavior

I expected the dropdown to show and to not raise an exception.

Screenshots or Videos

https://github.com/nextui-org/nextui/assets/31884435/455677d5-ee0f-45f6-bf88-97660457b20a

Operating System Version

Fedora 38 KDE Plasma; Linux laptop 6.3.11-200.fc38.x86_64 #1 SMP PREEMPT_DYNAMIC Sun Jul 2 13:17:31 UTC 2023 x86_64 GNU/Linux

Browser

Other (add additonal context)

[alightinastorm]

Happens on Tabs too @tabs/2.0.11

For now wrapping them in a client component ("use client") makes them work.

[jrgarciadev]

Hey @iyxan23 we are waiting for the next react-aria release to get this issue fixed, the current collection approach is compiled by next.js in a different way so it removes the use client; directive, in the meantime please add the directive on top of your files for collection based components -> Table, Accordion, Dropdown, and Tabs.

[iyxan23]

Hey @iyxan23 we are waiting for the next react-aria release to get this issue fixed, the current collection approach is compiled by next.js in a different way so it removes the use client; directive, in the meantime please add the directive on top of your files for collection based components -> Table, Accordion, Dropdown, and Tabs.

Alright! I'll be keeping an eye on new updates 😉 Thanks for the quick response

[guivalerioS]

Hy guys, Do we have an estimate of when this will be fixed?

[JimmyRice]

The Select component doesn't seem to be working either.

[RyanPaiva56]

Hey @iyxan23 we are waiting for the next react-aria release to get this issue fixed, the current collection approach is compiled by next.js in a different way so it removes the use client; directive, in the meantime please add the directive on top of your files for collection based components -> Table, Accordion, Dropdown, and Tabs.

What exactly do we add to our code to temporarily resolve it? I'm running into this issue with dropdowns.

[RyanPaiva56]

If anyone else comes here, this is what it's supposed to look like, and it does fix this error perfectly:

[alightinastorm]

If anyone else comes here, this is what it's supposed to look like, and it does fix this error perfectly:

No need to mark the whole page or larger server components as client components because of this.

You can just do this

"use client"
export { Select } from "@nextui-org/select"

Now you can just import the component from this file and you're done

[mohammad1381]

If anyone else comes here, this is what it's supposed to look like, and it does fix this error perfectly:

No need to mark the whole page or larger server components as client components because of this.

You can just do this

"use client"
export { Select } from "@nextui-org/select"

Now you can just import the component from this file and you're done

For some them not working this way. For example it works for Button but not work for Tabs

[meshv-p]

Happens on Tabs too @tabs/2.0.11

For now wrapping them in a client component ("use client") makes them work.

Thanks for this. It's works for me.. I was finding around for Tabs issue, but I didn't find....

[sspaeth-r7]

Is there any way to work around this on a component which must be server-side generated?

[yahorbarkouski]

Hey there, any updates for tabs?

[YTG2G3]

Still doesn't seem to be working. The workaround is creating a mess between client component and server action... I hope this gets fixed soon.

[EpicCatto]

any updates?

[mxchinegod]

If you put your offending Accordion/Dropdown/Select, etc. code into a new component, put "use script"; into that component, and import it into your server-borne .jsx file (being sure to remove "use script"; from there if you put it as a temp fix), it will work.

[caanyp24]

same issue here any updates?

[ahomu]

same issue...

[ArianSha]

+1

[elanclarkson]

+1

[ygd]

+1

[vvchldmsdn]

I fix this removing the NextUIProvider from the layout.tsx of your nextjs application in src/app/layout.tsx (i put providers there cuz i see it like the root app component). Create a new layout component in other directory and import providers there, it works perfectly for me

You meant "other directory" insidie app directory like 'src/app/something/layout' or 'src/something/layout' ? or either works. Thanks in advance

[usuarez]

I fix this removing the NextUIProvider from the layout.tsx of your nextjs application in src/app/layout.tsx (i put providers there cuz i see it like the root app component). Create a new layout component in other directory and import providers there, it works perfectly for me

You meant "other directory" insidie app directory like 'src/app/something/layout' or 'src/something/layout' ? or either works. Thanks in advance

Hello i found a fix for that:

1. we don't need import the rootLayout in our pages (my first mistake)
2. add the 'use client' directive is mandatory for our client side components, in this case if you import nextUI components in the page.tsx then need to declare 'use client' at the top of the file.

[vvchldmsdn]

I fix this removing the NextUIProvider from the layout.tsx of your nextjs application in src/app/layout.tsx (i put providers there cuz i see it like the root app component). Create a new layout component in other directory and import providers there, it works perfectly for me

You meant "other directory" insidie app directory like 'src/app/something/layout' or 'src/something/layout' ? or either works. Thanks in advance

Hello i found a fix for that:

1. we don't need import the rootLayout in our pages (my first mistake)
2. add the 'use client' directive is mandatory for our client side components, in this case if you import nextUI components in the page.tsx then need to declare 'use client' at the top of the file.

I love you

[robertgoacher]

Hey @iyxan23 we are waiting for the next react-aria release to get this issue fixed, the current collection approach is compiled by next.js in a different way so it removes the use client; directive, in the meantime please add the directive on top of your files for collection based components -> Table, Accordion, Dropdown, and Tabs.

Any update on this yet, @jrgarciadev ?

[whysocket]

Any updates?

[mayyusan101]

Any update?

[Pr1ms]

Hello. Does anyone have a workaround for rendering Table elements into a server page (which cannot be made a client page without rewriting like 30% of my application and infringing constraints I have to enforce) ?

None of the workarounds therein work for this purpose.

I've tried reexporting Table and its sub-components from within a use client context but it still generate the error : Error: Unknown element <[object Object]> in collection.

[ottoernir]

still no fix for this?

[CMarshall92]

Not only is this an issues the types are incorrect as well, its expecting react nodes and the components are returning reactElements

[Poweranimal]

Hey @iyxan23 we are waiting for the next react-aria release to get this issue fixed, the current collection approach is compiled by next.js in a different way so it removes the use client; directive, in the meantime please add the directive on top of your files for collection based components -> Table, Accordion, Dropdown, and Tabs.

@jrgarciadev Would you be so kind and share with us the issue of react-aria that fixes this issue?