RSC Directives and Bundler Limitations
ARCHITECTURE •
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
transpilePackagesconfiguration - 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: falseto 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 →