[BUG] - Unhandled Runtime Error Error: Unknown element <[object Object]> in collection.

[HishamYUM]

NextUI Version

2.2.9

Describe the bug

I am trying to use Accordion and AccordionItem components. But, it seems that doesn't support server components. However, the issue is only with AccordionItem. I am getting this error:

Unhandled Runtime Error Error: Unknown element <[object Object]> in collection.

But, it goes away when I include the "use client" directive. Is there any fix for this issue so I can use server components with Accordion. Here is my code:

` import Image from "next/image"; import { Accordion, AccordionItem } from "@nextui-org/react";

type Props = { email: string; };

const Page = ({ email }: Props) => { return ( <div className="flex flex-col justify-center items-center"> <Image src={"/assets/icons/please-verify.svg"} alt={"Please verify your email address"} width={150} height={150} /> <div className="font-medium text-xl">Verify your email to continue <div className="grid place-items-center text-sm text-zinc-500">

We just sent an email to the address:{" "} <span className="font-medium text-slate-600"> {email}

Please check your email and select the link provided to verify your address.

  <div className="mt-8">
    <Accordion>
      <AccordionItem aria-label="Change email" title="Change email">
        dummy text
      </AccordionItem>
    </Accordion>
  </div>
</div>

); };

export default Page; `

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Include Accordion and AccordionItem in your code

Expected behavior

Expetcted to use the AccordionItem components without using the "use client"

Screenshots or Videos

No response

Operating System Version

MacOS Sonoma Version 14.1.2 - M1 Max Chip

Browser

Firefox

[angelmtztrc]

Same behaviour when using <Listbox/> component.

[hardchor]

And <Table />... seems to come from @react-stately:

Unhandled Runtime Error
Error: Unknown element <[object Object]> in collection.

Call Stack
$eb2240fc39a57fa5$export$bf788dd355e3a401.getFullNode
node_modules/@react-stately/collections/dist/import.mjs (206:1)
getFullNode.next
<anonymous>
$eb2240fc39a57fa5$export$bf788dd355e3a401.iterateCollection
node_modules/@react-stately/collections/dist/import.mjs (161:1)
...

[marcoripa96]

And with Dropdown

[Zahid40]

Unhandled Runtime Error TypeError: Failed to execute 'createTreeWalker' on 'Document': parameter 1 is not of type 'Node'.

Call Stack $9bf71ea28793e738$export$2d6ec8fc375ceafa node_modules@react-aria\focus\dist\FocusScope.mjs (545:45) $9bf71ea28793e738$var$focusFirstInScope node_modules@react-aria\focus\dist\FocusScope.mjs (357:1) eval node_modules@react-aria\focus\dist\FocusScope.mjs (284:23)

[Zahid40]

this gives me error in navbar componenet

useEffect(() => { console.log("pathname changed to:", pathname); setIsMenuOpen(false); }, [pathname]);

i just want to close the menu in mobile when pathname chages

[luoyangwei]

When can this bug be fixed?

[madrimovDev]

I also encountered the same issue. Everything worked fine after I added 'use client'. However, I'm not sure if using 'use client' is the correct approach.

'use client'
import { Listbox, ListboxItem } from '@nextui-org/react'
import { fakeCategories } from '@/fake/fake-data'

export const Filters = () => {
	return (
		<div>
			<Listbox>
				{fakeCategories.map((category) => (
					<ListboxItem key={category.id}>assad</ListboxItem>
				))}
			</Listbox>
		</div>
	)
}

[slimshreydy]

Also running into this with <SelectItem>. I put "use client" on my page where I imported <SelectItem> and it worked, but I imagine there's a missing "use client" somewhere in the stately code...