RSC Directives and Bundler Limitations

Situation

The @juun/ui package contained 64 shadcn/ui components with "use client" directives for React Server Components. Attempted to build the package with multiple bundlers (tsup, pkgroll, unbuild, vite) to avoid using transpilePackages in Next.js. All bundlers stripped "use client" directives during the build process, breaking client-side functionality.

Task

• Build UI package with preserved "use client" directives
• Remove dependency on transpilePackages configuration
• Maintain proper RSC boundary markers

Action

1. Tested Multiple Bundlers

tsup (esbuild-based):

• Configured with component glob patterns
• Result: "use client" directives stripped with warning: "Module level directives cause errors when bundled"

pkgroll (esbuild-based):

• Zero-config library bundler
• Result: Same issue - directives removed during minification

unbuild (Rollup-based):

• Added path alias resolution for @/ imports
• Set failOnWarn: false to bypass warnings
• Result: Directives still stripped by Rollup's tree-shaking

vite (Rollup + esbuild):

• Library mode with preserveModules: true
• Configured glob-based entry resolution
• Result: Same fundamental issue

2. Root Cause Analysis

All modern JavaScript bundlers treat "use client" as:

• Dead code (no runtime effect)
• Module-level directive (removed during minification)
• Unknown pragma (pre-RSC bundler design)

No standard plugin exists to preserve RSC directives across bundlers.

3. Architectural Decision

Migrated all UI components directly into apps/web:

• 64 components →