Bundling component library for RSC (React Server Components) and Next.js App Router

I work on a library of React components that will be used across various Next.js projects. I want components in this library to be written in RSC way, meaning the base would be server ones and only some nodes would have the "use client" directive on top of them, to provide interactivity.

Currently, I have problems with bundling such library in the way I would like.

I use Vite.js for making bundles, and since Vite is build on top of Rollup, there is Rollup solution (https://github.com/stropho/rollup-plugin-banner2) to add "use client" directive on top of the whole bundle, marking all the components there as "client" ones.

This indeed makes the components usable, but on the other hand abandons all the advantages of React Server Components.

This "all or nothing" solution seems not good for me.

What I have tried so far:

1. distribute the library source code rather than its bundle and use transpilePackages: ['ui-library'], in next.config.js.
   This is not working due to different typescript absolute path settings in my next.js app and the UI library package. It does not seem like a solution.

2. use Rollup plugin https://github.com/Ephem/rollup-plugin-preserve-directives and preserveModules: true,. While this works with pure Rollup, if I bundle the components using Vite.js the "use client" directives are still somehow removed out of their bundle files (no minification used).

It would be great to have the ability to bundle RSC library in Vite, without need to dig into Rollup config.

What do you think would be the preferred solution ? Is there some alternative in other bundlers like Webpack, Parcel or others ?

Some sources I have read about the subject:

• https://www.misha.wtf/blog/rollup-server-components
• https://github.com/rollup/rollup/issues/4699

You can use Next.js with TurboRepo to create your library. Checkout this library that I published sometime back - https://github.com/mayank1513/sticky-section-header. With this approach, you can define the 'use client' directive as required on a per component basis.

Update: Though I do not have enough time to do much research for the absolute paths, following are some resources that may be helpful.

• https://github.com/vercel/turbo/discussions/620#discussioncomment-2136195 This discussion talks about absolute paths in monorepo
• https://stackoverflow.com/a/59768302/9640177 This talks about how to define path so that it works.