How can I separate a large React codebase based on re-usable components?

Question

I currently have a large, universal react application. I want to extract some of the components out of the app and put them in a separate repo so other teams/project can import them and use them on their frontends.

Eg: Repository 1 that contains component

Repository 2 is a web app that can import from Repository 1

Some concerns that I have:

I want to limit the amount of duplicate / unused code

Similar to how you can import a single lodash function (import forEach from 'node_modules/lodash/lib/...' vs import { forEach } from 'lodash',

I want components to be able to be imported standalone, without having to bundle all components

I don't want to duplicate dependencies

If all of my components are built as single files and they all require React, I'll have bundled React into my codebase as many times as the number of components that I have.

---

Is it a good idea to have a separate built file for every component that I export? If I don't import a built file, would I have to explicitly tell webpack in my main repository to look in my component's node_modules?

Answer 1

As far as I understand, your React components are now in different subfolders of your project. Why don't you move them into separate Git repos and connect those repos back to your app using Git SubModules ?

You can also make React components npm packages and install them using NPM.

Every app that uses a component will need to include it into its build chain. I don't think a component should really build itself.