reactjs - Configuration for create-react-app after ejecting to build a component library

Question

I started to build a component library that I want to publish on NPM (and reuse in other apps) by creating a React app using create-react-app. Unfortunately the create-react-app default configuration doesn't seem to support building such component libraries (see these issues). So it seems I have to eject.

Do you have some instructions what to configure after ejecting to make this a component library I can reuse in other apps (I guess some Webpack stuff)?

Answer 1

Re-framing my comments into an answer.

Don't eject! CRA hides a lot of stuff under the hood and ejecting throws it up. It's relatively easier to just clone your src into another project with the tooling setup done.

And it's not very difficult to setup one yourself! Here's the things you will need to do:

1. Basic babel and webpack configuration so your code compiles.

2. Make sure React and React-DOM are added as external dependencies in your package.json file and added as alias in your webpack.config.js. (A thorough discussion is here.) This is important to ensure you ship the smallest bundles only. Also, React doesn't play well with multiple copies.

3. Optionally, do the same for any other heavier libraries, e.g. Material-UI, Bootstrap, Lodash etc.

4. In webpack's configuration, decide how you want your library exports should be? You should be good with UMD.

5. Add main (and optionally module) entries in your package.json to let npm imports know where the components should be imported from.

6. Publish it.

7. Done!

Or, you can simply clone one of these super thin component projects and put in your components there -

• https://github.com/wangzuo/react-progress-label
• https://github.com/aaronshaf/react-toggle

There are more complete starter-kits as well, but IMO it's important to first know the details yourself before you abstract them away. Once you are familiar with the process, you should try leveraging the kits too as they go much beyond the basics, like test integration, react-storybook support and great npm publishing support.

UPDATES:

The purpose of CRA is to allow quick experimentation and on-boarding to React development, without going through the (somewhat complicated to a beginner) tooling setup. The intended use case of CRA, as denoted by the "App" in the name, is the whole app, not a component. Although developing anything built on language features like ES6 takes some tooling, an app typically takes more setup than a component. E.g. you also need a server component which hosts the generated code. CRA does all this and more for you.

And if you are working on an app, you will eject when you want to take control of the server side of it. It adds value in that case as you will get the basic hosting code auto-generated by CRA during eject.

To address test needs, CRA also has Jest integration, which is a test runner having React specific features like snapshot testing. Again, setting it up manually with your build pipeline is a handful and CRA once again hides all of this complexity from you, so you can simply focus on writing the tests.