Skip to content

Developing React components across multiple repositories

This is a quick how-to on developing a React app and n components in different repos in parallell without the need to do a full npm publish. The yalc-change-sync script in intellij-settings does most of the heavy lifting. The rest of the guide assumes you have yalc-change-sync on your path.

Prerequisite webpack changes

A prerequisite for this to work is that webpack does not cache the code. In the webpack.config.js of the parent project the snapshot.managedPaths property needs to be overwritten with the following:

{
    ... // Rest of config
    snapshot: {managedPaths: []},
}

Starting the sync script

To synchronize the development across <path-to-application> and its dependent components in <path-to-component-1> and <path-to-component-2> run:

yalc-change-sync link <path-to-application> <path-to-component-1> <path-to-component-2>

The above will link the given components into the application and enable a file watcher that updates the packages when they change.

Note that this modifies the package.json file.

How does it work?

The yalc-change-sync tool uses yalc and onchange to automagically update the changed components in the parent app. The script installs the dependencies using npx and they get removed the node_modules/.bin folder is deleted.

Cleaning up

When you are done developing, stop the yalc-change-sync process and revert the package.json file. Remember to update the versions.

Using the built-in npm link mechanism does not work well with dependencies that use React due to intricacies in how the dependencies are loaded in webpack. At the time of writing there does not seem to be an easy way to make it work.