headless ui support with react server components

[ahmed-adly-khalil]

Hello,
I'm trying to use headless UI with RSC & next JS v12.1.4 and getting this error:

Module not found: Package path ./?__sc_server__ is not exported from package 

/Users/a.../node_modules/@headlessui/react (see exports field in /Users/.../node_modules/@headlessui/react/package.json)

are there plans to support RSC?

[TheodorTomas]

Hello, any news on this?

[RobinMalfait]

Hey!

Make sure that the file (or a parent) where you use Headless UI components is marked with "use client";

[EliasHami]

I'm not sure it will ever support RSC because it needs to keep track of the state of the ui using some javascript code

[arabold]

My understanding is that the preferred way in React 18 with Server Components (that includes NextJS with Server Components) would be that every component of HeadlessUI that uses client-side states (aka hooks) adds the "use client"; statement at the beginning of the file to mark that component client-side, while everything else is server-side by default.

This enables users of HeadlessUI to transparently include those components without having to worry whether or not is is client-side or server-side compatible. It avoids the need of marking every page in the application with "use client"; as @RobinMalfait suggested and moves the responsibility to the maintainers of the component library instead, making it easier for everyone else.

At the end of the day it doesn't matter whether HUI supports server-side rendering or is client-side only. As long as the "use client"; directive is used it will work transparently in any environment.

References:

• https://react.dev/reference/react/use-client
• https://nextjs.org/docs/getting-started/react-essentials

[zackdotcomputer]

Looking at the code in the main branch (which is representative of the 2.0 alpha in progress) it looks like the HeadlessUI team is going down this path? @RobinMalfait can you confirm if that's the case and 2.0 will be SSR compatible (in that every non-SSR-compatible component will be annotated 'use client')?

[ivan-kleshnin]

My understanding is that the preferred way in React 18 with Server Components (that includes NextJS with Server Components) would be that every component of HeadlessUI that uses client-side states (aka hooks) adds the "use client"; statement at the beginning of the file to mark that component client-side, while everything else is server-side by default.

It's not enough, many Headless UI components are based on render-prop pattern which is incompatible with SC. Functions can't cross the boundary between Server and Client. The whole library has to be redesigned, unfortunately.