[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

nextui-bug.mp4

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)

[robodove]

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:

[robodove]

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

[tookender]

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

[bdubtga]

Still having this issue trying to use dropdowns, any timeline on a update?

[usuarez]

Still having this issue trying to use dropdowns, any timeline on a update?

Hi, try with the 'use client' y your component

[RyanPaiva56]

Still having this issue trying to use dropdowns, any timeline on a update?

Hi, try with the 'use client' y your component

This works but breaks SSR

[usuarez]

This works but breaks SSR

Every nextUi component has the 'use client' declared at top, and i don't know if the dev want to change it, finally i decided to use primereact, is very easy

[stefnto]

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.

Guys did you read the dev's reply? He said you should use "use client" for now, but internally nextjs removes the 'use client' so the component is rendered in the server...

[dragonlobster]

this bug also applies to Select. the docs don't mention use client at all

[Veeresh-R-G]

I am facing this issue with the table component too.

• I have wrapped my Table component in use client making it a client component
• Using the stable version of next-ui/react

[wingkwong]

@Veeresh-R-G it's more like you missed TableBody.

[Veeresh-R-G]

@Veeresh-R-G it's more like you missed TableBody.

@wingkwong I had copied the code from the docs at Next-UI. For the first time I ran the code, it did show the mentioned errors, but now its working fine.

Thanks for the prompt reply 😀

[slimshreydy]

Any updates on this issue? appears to still be broken, even when I try exporting it in a simple component that says "use client" as the top, e.g. "use client" export {Select, SelectItem} from "@nextui-org/select" Instead, I have to put "use client" on the page where I invoke Select, which is not ideal.

[yanuu1337]

If you're using the Pages Directory, you don't need to worry about this.

Unfortunately the only "fix" for now (for App Directory projects) is to move your element (whether it's a Table, an Accordion or some other element with this issue) to a seperate Client Component and render that where you need to.

[citrusjunoss]

it's not work

// /utils/nextui.ts
"use client";

import { Accordion, AccordionItem } from "@nextui-org/accordion";

export { Accordion, AccordionItem };

// /app/veterinary/page.tsx

import { Accordion, AccordionItem } from "@/utils/nextui";
import { title } from "@/components/primitives";

const VeterinaryPage = async () => {
  const res = await fetch(
    `${process.env.API_HOST}/categories/categories?source=1`,
  );
  const data = (await res.json()) || [];

  return (
    <div className="flex flex-col items-center justify-center gap-4">
      <h1 className={title()}>专业医疗</h1>
      {/* body */}
      <div className="flex flex-wrap gap-4 mt-4">
        <Accordion variant="splitted">
          {data.map((item: any) => (
            <AccordionItem
              key={item.id}
              aria-label="Accordion 1"
              title={item.name}
            >
              {item.children.map((child: any) => (
                <span key={item.id}>{child.name}</span>
              ))}
            </AccordionItem>
          ))}
        </Accordion>
      </div>
    </div>
  );
};

export default VeterinaryPage;

thorow error

 Error: Unknown element <[object Object]> in collection.
    at $eb2240fc39a57fa5$export$bf788dd355e3a401.getFullNode (/Volumes/PersonalDisk/GitHub/ahri-web/.next/server/chunks/ssr/node_modules_49bccb._.js:1547:23)
    at getFullNode.next (<anonymous>)
    at $eb2240fc39a57fa5$export$bf788dd355e3a401.iterateCollection (/Volumes/PersonalDisk/GitHub/ahri-web/.next/server/chunks/ssr/node_modules_49bccb._.js:1503:26)
    at iterateCollection.next (<anonymous>)
    at [Symbol.iterator] (/Volumes/PersonalDisk/GitHub/ahri-web/.next/server/chunks/ssr/node_modules_49bccb._.js:1630:22)
    at Generator.next (<anonymous>)
    at new $05ca4cd7c4a5a999$export$863faf230ee2118a (/Volumes/PersonalDisk/GitHub/ahri-web/.next/server/chunks/ssr/node_modules_49bccb._.js:841:18)
    at /Volumes/PersonalDisk/GitHub/ahri-web/.next/server/chunks/ssr/node_modules_49bccb._.js:1729:454
    at /Volumes/PersonalDisk/GitHub/ahri-web/.next/server/chunks/ssr/node_modules_49bccb._.js:1679:16
    at $7613b1592d41b092$export$6cd28814d92fa9c9 (/Volumes/PersonalDisk/GitHub/ahri-web/.next/server/chunks/ssr/node_modules_49bccb._.js:1673:241)
    at $875d6693e12af071$export$728d6ba534403756 (/Volumes/PersonalDisk/GitHub/ahri-web/.next/server/chunks/ssr/node_modules_49bccb._.js:1729:209)
    at useAccordion (/Volumes/PersonalDisk/GitHub/ahri-web/.next/server/chunks/ssr/node_modules_49bccb._.js:2776:203)
    at /Volumes/PersonalDisk/GitHub/ahri-web/.next/server/chunks/ssr/node_modules_49bccb._.js:3107:362

[yanuu1337]

@citrusjunoss You can't use these elements with server components (for now I guess), also, why would you import the Accordion in a CC file and export it?

Just make the VeterinaryPage not async, use the "use client" directive, wrap the fetch in a useEffect, store the data as state and you're good. Take a look at these docs for fetching

[citrusjunoss]

@citrusjunoss You can't use these elements with server components (for now I guess), also, why would you import the Accordion in a CC file and export it?

Just make the VeterinaryPage not async, use the "use client" directive, wrap the fetch in a useEffect, store the data as state and you're good. Take a look at these docs for fetching

Do I have to give up server-side rendering for my entire page because of this component, if so, then give up on this component, server-side rendering is more important to me

BTW, I see the official website describes it this way, won't he take effect if I put it in a file like this?

[yanuu1337]

@citrusjunoss Yes, you can export part of your code into a new file and use it in your server component (as long as the new file has a "use client" directive)

[jjangga0214]

It's been a while. Shouldn't this be documented as note?

[KUN1007]

Among these components that pose challenges for SSR, the most impactful one is the Tabs component.
For this component, if the defaultSelectedKey property is set, SSR will function (though there will be unsightly hydration errors in the console, but if you don’t mind that, everything works as expected).
On this basis, when the page initially renders, the selected item on the Tabs will flicker, causing visual disruption for users. Therefore, we can set disableAnimation={true} and change it to disableAnimation={false} once hydration is complete, achieving a simple, usable Tabs component.
Unfortunately, there will still be hydration errors in the console :(

[Jimflip]

I'm confused, there have been 9 react-aria releases since this issue was raised, have any of them addressed this problem?

If I understand correctly many components are only client side due to the use of 'use client', is that correct?

[nthsense]

I'm guessing react-aria is never going to fix this. The reasoning is here: adobe/react-spectrum#5826