4

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:

eliasondrej
  • 105
  • 3
  • _Answers without a link to a working repository will be flagged / reported._ do you think this is Upwork or something? – technophyle Jun 12 '23 at 20:19
  • 1
    Just a reminder that **answers must be self-contained**; while answers with a link as _supplemental_ information are fine, the _answer itself_ must not be behind a link. – Ryan M Jun 13 '23 at 00:51

1 Answers1

3

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.

Mayank Kumar Chaudhari
  • 16,027
  • 10
  • 55
  • 122
  • Hi, thanks for the answer! This solution have similar problem to distributing the source code, because TSC compiler does not resolve absolute import paths. Since absolute imports are a DX necessity for large scale codebase, there would be still need to resolve thouse paths correctly. Also some additional code processing on top of what tsc is doing could be benefitial in some cases, thats why I would prefer some bundler based solution. – eliasondrej Jun 11 '23 at 10:24
  • Please check out this discussion for absolute paths - https://github.com/vercel/turbo/discussions/620#discussioncomment-2136195 – Mayank Kumar Chaudhari Jun 11 '23 at 15:42
  • This answer may also be helpful - https://stackoverflow.com/q/58554760/9640177. Anyway thanks for upvoting – Mayank Kumar Chaudhari Jun 12 '23 at 03:44
  • @Foobar would you like to award the bounty instead of wasting it? – Mayank Kumar Chaudhari Jun 13 '23 at 08:01