Senior LevelReact JS & React 19
How do you configure a shared React component library in a Turborepo/Nx monorepo with tsup/Rollup?
❓ Interview Prompt: Explain Monorepos (Turborepo, Nx), bundling component libraries (`tsup`, `esbuild`), exporting ESM/CJS, peerDependencies, and `.d.ts` declaration maps.
Architecting shared design system component packages in enterprise monorepos:
Build & Package Requirements:
1
'peerDependencies': Externalize 'react' and 'react-dom' so consuming apps provide the singleton React runtime.
2
Dual Output (ESM + CJS): Bundle using 'tsup' outputting '.mjs' (ESM) and '.cjs' (CommonJS).
3
Tree-Shaking: Configure '"sideEffects": false' in 'package.json' to allow bundlers (Vite/Next.js) to drop unused components.
Code Implementation Example
json
{
"name": "@company/ui",
"version": "1.0.0",
"main": "./dist/index.cjs",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"sideEffects": false,
"peerDependencies": {
"react": "^19.0.0",
"react-dom": "^19.0.0"
}
}💡Package.json configuration for shared monorepo React component libraries.
🎯 Interview Key Takeaway
Externalize react as a peerDependency and configure sideEffects: false in monorepo component packages to enable tree-shaking.
#Monorepo#Turborepo#tsup#Design System#Senior
Back to all React JS & React 19 Questions→