React "use client"; directive for interactive components?

[jabza]

Hi, thank you for creating this UI library! After weighing a lot of options, this seemed to provide the perfect balance of features for my new NextJS 13 project.

With the advent of React Server Components and the new NextJS app router, right now with most libraries we are forced to include "use client"; at a root/page level.

Would it be within scope of this library to include "use client"; on the interactive (or all, if its easier) Chimera UI components?

My understanding is this is a React directive rather than just something for NextJS. https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md

This would allow the very leaf nodes of the DOM to be client based, but take advantage of new rendering methodologies.

Thanks :)

[jabza]

UPDATE: Hmm, the error seems to be coming from: node_modules\@floating-ui\react-dom\dist\floating-ui.react-dom.esm.js node_modules\@radix-ui\react-popper\dist\index.js

So including a Button in a server component triggers the error. I guess because Radix internally is depending on floating-ui with uses a React useEffect. Maybe this is a Radix issue.

Radix supports SSR, but not necessarily RSC: https://www.thearmchaircritic.org/mansplainings/react-server-components-vs-server-side-rendering (I am learning as I go along :D) - So maybe "use client" is still something within scope of UI libraries.

[williamlmao]

Hey @jabza, there is already "use client" at the top of the radix components. Can you provide a more specific example of when this is an issue with next 13? The exact components you ran into issues with?

Additionally, would you be able to put "use client" in your parent component? I believe that should make all of its children client rendered, but I could be wrong.

Also, thank you so much for checking this library out and trying to use it!

[jabza]

Hey @williamlmao , i tried importing the basic Button component into my Page.tsx React Server Component and was met with the above error. The only fix would be to make the Page use client, or make a wrapper just for Button that adds the directive.

Thets interesting that Radix uses the directive. For some reason importing Chimera UI Button is also importing an indirect dependency which uses React context and triggers the error. (Popper and floating UI)

Thanks again, this feels like the go-to UI library for Nextjs 13 with react server components!

[williamlmao]

@jabza - sorry, I misspoke. I meant at the top of the Chimera components! Not all of them though. Chimera button for example does not need to be a client rendered. However, the Popover does. You can see the source code for Chimera components here.

I think this might have something to do with the Popper / Floating UI? I am not really sure what those are. If you can share your repo with me, I can take a look.

[jabza]

Interesting. Well the component I imported 'Button' was triggering React complain about a dependency (Floating UI) that was using statefulness. I don't know why that dependency, are you seeing the same?