Is a bundler such as rollup needed when creating a react component library? I.e. if all I have is a simple project with Buttons/Checkboxes etc. as typescript files which are then published on npm, doesn’t running tsc with a proper config turn all of it into a dist bundle?
What is the advantage of rollup then? I read that tree shaking might be it, but if the js files live in their own directories, doesn’t the below import a single component, too?
Import { Button } from ‘myLibrary/buttons’
The short answer is no, a bundler is not necessarily needed.
A bundler is a handy tool that can do a lot of the gruntwork of transpiling and moving files around for you. In your case, if you have a simple group of ts or tsx files, and you simply want to transpile them to js on a 1 to 1 basis (1 new js file for every ts file, with the same name), you can absolutely just use tsc to transpile your files, output them to some build directory, and publish that. That's a totally valid way to create a react component library with typescript.
On the other hand, if things are more complicated than just a 1-to-1 ts-to-js conversion, then a bundler may come in handy. For example, if your library includes other resources like stylesheets, images, web worker files, etc., tsc won't help you there. You would need to manually copy the files to where you want in your build directory. Or you can use a bundler to bundle them together file you. Or, as another answer mentioned, you may want to use specific babel transformations for specific compatibilities, which can be easily configured with bundlers. You may want to do more involved things like codesplitting, or the opposite (many entry files into a single output) - the bundler can help with that, where tsc cant.
I recently found myself using a bundler to make a react component library, but I switched over the use tsc because it was a simple scenario and I liked typescript's output better.
You would use rollup for wider compatibility.
Bundlers are useful when using JavaScript features not yet implemented universally because they simplify adding build tools that can polyfill/transpile modern features and syntax to comply with the current implemented web standards. Since you are publishing a library instead of a web app, I would argue a bundler is less pertinent, but not out of the question. ES6 modules (import and export) for example are not universally supported (Typescript 1.5+, Node 13+). Rollup can ensure more universal compatibility, especially when paired with tools like Babel, for example. Out of the box, it is a built to "future proof code":
...the ES6 revision of JavaScript, which includes a syntax for importing and exporting functions and data so they can be shared between separate scripts. The specification is now fixed, but it is only implemented in modern browsers and not finalised in Node.js. Rollup allows you to write your code using the new module system, and will then compile it back down to existing supported formats such as CommonJS modules, AMD modules, and IIFE-style scripts. This means that you get to write future-proof code...
Note that for React libraries, most consumers will meet the minimum requirements to use your library without any bundler transformations.