How are you bundling a React Component Library?

This page summarizes the projects mentioned and recommended in the original post on /r/reactjs

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • create-react-app

    Set up a modern web app by running one command.

  • However, here are my results after extensive research and experimentation. It should be noted that all bundlers have been tested/experimented with a demo setup, my-app which is the main react application and my-lib which is the react component library: - webpack - I initially started with using webpack 5 for the library which worked nicely. However, I was only able to build in production mode, where running webpack in development threw errors. After some chit-chats with the webpack people, create-react-app still uses Webpack 4 under the hood, which makes it incompatible to use Webpack 5 for the library in development mode only. Apparently you can't compile, in development only, your main application with Webpack 4 and at the same time compile the library with Webpack 5. I.e. you're for now stuck using Webpack 4 in the library, and in several months you have to switch to Webpack 5 since it's on CRA's roadmap. - rollup - On the internet, it's commonly said that rollup is for libraries, webpack for applications (Source 1 | Source 2). Using the demo setup and following several online resources, I felt that rollup relied too much on plugins to achieve ts, sass, sass-modules and images support. Nothing wrong with that, since webpack does too, but most of these plugins have a small community around them and are not actively developed. Finally, when I had everything up and running, the setup looked more like a setup with many plasters, i.e., it was full of hotfix plugins trying to solve "now" issues. - parcel - Let's not get started with Parcel... (Have enough bad experience with it) - Esbuild - New player on the market. Haven't tried it out yet, may be a better alternative to rollup, but just looking at it - it would probably have similar issues depending on plugins with low community support.

  • vite

    Next generation frontend tooling. It's fast!

  • Didn't even know about ViteJS library mode, but as you mentioned, uses rollup under the hood and requires plugins for TS bundling (you can see that the solutions vary from compiling with typescript, using @rollup/plugin-typescript (official) or rollup-plugin-typescript2 plugin.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • create-react-library

    Discontinued CLI for creating reusable react libraries.

  • At first i thought that this was THE solution but looking deeper at the source code, this tool is a wrapper around a wrapper around a wrapper.... Don't get me wrong, it probably works, but it's currently using a rollup configuration that was created in 2018, the package itself has not seen any updates in 17 months and has 106 open issues. Also the owner says himself that he's not able to work that much on it anymore and suggest to use TSDX which in return hasn't been updated in several months, many open issues and extensive customization is recommended with patch-package which already in itself is a red-flag :(

  • tsdx

    Zero-config CLI for TypeScript package development

  • At first i thought that this was THE solution but looking deeper at the source code, this tool is a wrapper around a wrapper around a wrapper.... Don't get me wrong, it probably works, but it's currently using a rollup configuration that was created in 2018, the package itself has not seen any updates in 17 months and has 106 open issues. Also the owner says himself that he's not able to work that much on it anymore and suggest to use TSDX which in return hasn't been updated in several months, many open issues and extensive customization is recommended with patch-package which already in itself is a red-flag :(

  • patch-package

    Fix broken node modules instantly 🏃🏽‍♀️💨

  • At first i thought that this was THE solution but looking deeper at the source code, this tool is a wrapper around a wrapper around a wrapper.... Don't get me wrong, it probably works, but it's currently using a rollup configuration that was created in 2018, the package itself has not seen any updates in 17 months and has 106 open issues. Also the owner says himself that he's not able to work that much on it anymore and suggest to use TSDX which in return hasn't been updated in several months, many open issues and extensive customization is recommended with patch-package which already in itself is a red-flag :(

  • recursive-proxy-mock

    Create a proxy which can mock any object, function, class, etc. with infinite depth and combinations.

  • If you are just looking for a TS library config (not related to react) then here's a good example I can share: https://github.com/CreativeTechGuy/recursive-proxy-mock/blob/main/rollup.config.js

  • kcd-scripts

    CLI toolbox for common scripts for my projects

  • preconstruct: https://www.reddit.com/r/reactjs/comments/reqfpi/how\_are\_you\_bundling\_a\_react\_component\_library/ kcd-scripts: https://github.com/kentcdodds/kcd-scripts

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo
  • turborepo

    Discontinued Incremental bundler and build system optimized for JavaScript and TypeScript, written in Rust – including Turborepo and Turbopack. [Moved to: https://github.com/vercel/turbo]

  • nx

    Smart Monorepos · Fast CI

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts