How are you bundling a React Component Library?

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

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • Scout APM - Less time debugging, more time building
  • SonarQube - Static code analysis for 29 languages.
  • JetBrains - Developer Ecosystem Survey 2022
  • 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.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • create-react-library

    ⚡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

  • Scout APM

    Less time debugging, more time building. Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.

  • turborepo

    The High-performance Build System for JavaScript & TypeScript Codebases

  • nx

    Smart, Fast and Extensible Build System

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