[BUG] - Accordion is not working properly

[DarkWolff71]

NextUI Version

2.2.9

Describe the bug

Accordion is not working next version: 14.0.4

Logs: ⨯ node_modules@react-stately\collections\dist\import.mjs (205:22) @ $eb2240fc39a57fa5$export$bf788dd355e3a401.getFullNode ⨯ Error: Unknown element <[object Object]> in collection. at getFullNode.next () at iterateCollection.next () at Generator.next () null

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Create a new next js app and install next ui and use the accordion

Expected behavior

The accordion should work as shown in the docs

Screenshots or Videos

No response

Operating System Version

Windows 10

Browser

Chrome

[r0ld3x]

Can you share the code? like what type of data you are providing?

[devlzcode]

Can you share the code? like what type of data you are providing?

This bug happens when some components are rendered inside server components. I've experienced it with User, Tabs, and Dropdown so far.

[LucasTempass]

I'm suffering from the same issue using Next.js version 14.0.3. It can be reproduced just copying and pasting the code example from the official docs.

[antoniobologna]

Same here... This is basically my code being rendered inside a NextJS Page

1. Using App Router
2. next v14.0.3
3. @nextui-org/react v2.2.9

<Accordion>
  <AccordionItem
    key="1"
    aria-label="Overview"
    subtitle="Press to expand"
    title="Overview"
  >
    <p className="my-10 dark:text-zinc-400">{data.description}</p>
  </AccordionItem>
</Accordion>

[pwuexec]

Same problem here, I'm using the table. Use the "use client" directive at the top @DarkWolff71

[danieldid]

The problem only seems to occur when using use server though

[ralphmanns]

That worked for me:

Changing the NextJs 14 default rootLayout export from

export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return

to

export default function RootLayout({children}: { children: React.ReactNode }) { return

[satu-jovanhartono]

Same here... This is basically my code being rendered inside a NextJS Page

1. Using App Router
2. next v14.0.3
3. @nextui-org/react v2.2.9

<Accordion>
  <AccordionItem
    key="1"
    aria-label="Overview"
    subtitle="Press to expand"
    title="Overview"
  >
    <p className="my-10 dark:text-zinc-400">{data.description}</p>
  </AccordionItem>
</Accordion>

i'm having the same problem. for now the workaround is to use use client directive at the component that uses Accordion

[satu-jovanhartono]

bump

[TudorEsan]

same problem here

[TudorEsan]

well for me it seems that what was wrong is that i had a reusable component using the AccordionItem after not using the reusable component the accordion works again

'use client';

import { AccordionItem } from '@nextui-org/react';
import Image from 'next/image';
import React from 'react';

import { Button } from '@/components/ui/button';

interface Props {
  image: string;
  buttonText: string;
  onClick: () => void;
  description: string;
  title: string;
  points: string | number;
  key: string;
}

export const ActiveTask = ({
  image,
  buttonText,
  onClick,
  description,
  title,
  points,
  key,
}: Props) => {
  return (
    <AccordionItem
      key={key}
      aria-label="Accordion 1"
      title={
        <div className="flex items-center justify-between gap-3">
          <div className="flex gap-3 items-center">
            <Image
              src={image}
              alt="x"
              width={32}
              height={32}
              className="w-8 h-8"
            />
            <p>{title}</p>
          </div>
          <p className="text-muted-foreground">{points} Points</p>
        </div>
      }
    >
      <div className="p-4">
        <p>{description}</p>
        <div className="flex justify-end">
          <Button variant="monochrome" className="ml-auto" onClick={onClick}>
            {buttonText}
          </Button>
        </div>
      </div>
    </AccordionItem>
  );
};

[parsasabetz]

Had the same problem here, but using the "use client"; directive did solve it. This probably means that NextUI should consider working on the errors related to when their components are mistakenly used in server components... I was initially confused where I've messed up using server actions again...

[steebchen]

It would be great if server components could be supported. Of course 'use client' makes the error go away, but that basically prevents all of the contents not being rendered at all on the server, so crawlers will not see this content unless they use JS rendering.

[konotorii]

bump, still doesnt work unless rendered in client

[chihabhajji]

bump

[pradeepnswamy]

Having 'use client'; on top of my page resolved the issue