Open iyxan23 opened 1 year ago
Happens on Tabs too @tabs/2.0.11
For now wrapping them in a client component ("use client") makes them work.
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.
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
Hy guys, Do we have an estimate of when this will be fixed?
The Select component doesn't seem to be working either.
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.
If anyone else comes here, this is what it's supposed to look like, and it does fix this error perfectly:
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
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
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....
Is there any way to work around this on a component which must be server-side generated?
Hey there, any updates for tabs?
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.
any updates?
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.
same issue here any updates?
same issue...
+1
+1
+1
I fix this removing the NextUIProvider from the
layout.tsx
of your nextjs application insrc/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
I fix this removing the NextUIProvider from the
layout.tsx
of your nextjs application insrc/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 meYou 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:
I fix this removing the NextUIProvider from the
layout.tsx
of your nextjs application insrc/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 meYou 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:
- we don't need import the rootLayout in our pages (my first mistake)
- 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
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.
Any update on this yet, @jrgarciadev ?
Any updates?
Any update?
Hello.
Does anyone have a workaround for rendering Table
elements into a server page (which cannot be made a client page without rewriting like 30% of my application and infringing constraints I have to enforce) ?
None of the workarounds therein work for this purpose.
I've tried reexporting Table
and its sub-components from within a use client
context but it still generate the error : Error: Unknown element <[object Object]> in collection.
still no fix for this?
Not only is this an issues the types are incorrect as well, its expecting react nodes and the components are returning reactElements
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.
@jrgarciadev Would you be so kind and share with us the issue of react-aria that fixes this issue?
well
@jrgarciadev Would you be so kind and share with us the issue of react-aria that fixes this issue?
Still having this issue trying to use dropdowns, any timeline on a update?
Still having this issue trying to use dropdowns, any timeline on a update?
Hi, try with the 'use client' y your component
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
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
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...
this bug also applies to Select. the docs don't mention use client
at all
I am facing this issue with the table component too.
use client
making it a client component@Veeresh-R-G it's more like you missed TableBody
.
@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 π
Any updates on this issue?
"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.
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.
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
@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 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?
@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)
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/dropdownYour Example Website or App
No response
Steps to Reproduce the Bug or Issue
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
https://github.com/nextui-org/nextui/assets/31884435/455677d5-ee0f-45f6-bf88-97660457b20a
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)