NextUI Button forcing to turn page into client side
Unanswered
Spectacled bear posted this in #help-forum
Spectacled bearOP
I have been using https://nextui.org/docs/components/button for my application.
As per the docs, I shouldn't be bound to make the server component into client to use this button. The sample code also doesn't do that.
However, in practical case, I am running into this error if I don't add "use client" . What am I doing wrong here?
You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
PS: Only if I add the button on root page.tsx it works w/o adding use client.
As per the docs, I shouldn't be bound to make the server component into client to use this button. The sample code also doesn't do that.
However, in practical case, I am running into this error if I don't add "use client" . What am I doing wrong here?
You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
PS: Only if I add the button on root page.tsx it works w/o adding use client.
4 Replies
Shy Albatross
Next.js 13 introduces a new app/ directory structure. By default it uses Server Components. As NextUI components use React hooks, we added the use client; at build time, so you can import them directly in your React Server Components (RSC).
Important 🚨: Note that you need to import the component from the individual package, not from @nextui-org/react.
each component is annotated if it's compatible with RSC, Button isn't