Open DarkWolff71 opened 11 months ago
Can you share the code? like what type of data you are providing?
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.
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.
Same here... This is basically my code being rendered inside a NextJS Page
<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>
Same problem here, I'm using the table. Use the "use client" directive at the top @DarkWolff71
The problem only seems to occur when using use server
though
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
Same here... This is basically my code being rendered inside a NextJS Page
- Using App Router
- next v14.0.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
bump
same problem here
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>
);
};
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...
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.
bump, still doesnt work unless rendered in client
bump
Having 'use client'; on top of my page resolved the issue
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