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

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.

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

Hey there, any updates for tabs?

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

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 ?

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.

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.

Happens on Tabs too @tabs/2.0.11

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

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.

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

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

well

still no fix for this?

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

+1

+1

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

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