nextui-org / nextui

🚀 Beautiful, fast and modern React UI library.
https://nextui.org
MIT License
21.98k stars 1.54k forks source link

[BUG] - Accordion is not working properly #2136

Open DarkWolff71 opened 11 months ago

DarkWolff71 commented 11 months ago

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 commented 11 months ago

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

devlzcode commented 11 months ago

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 commented 10 months ago

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 commented 9 months ago

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>
image
edproton commented 9 months ago

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

danieldid commented 9 months ago

The problem only seems to occur when using use server though

ralphmanns commented 9 months ago

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 commented 8 months ago

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>
image

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

satu-jovanhartono commented 8 months ago

bump

TudorEsan commented 7 months ago

same problem here

TudorEsan commented 7 months ago

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 commented 7 months ago

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 commented 5 months ago

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 commented 5 months ago

bump, still doesnt work unless rendered in client

chihabhajji commented 5 months ago

bump

pradeepnswamy commented 3 months ago

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