Testing a React Component Library package locally, using Yarn and Craco

I work on a React Component Library, you know, buttons and stuff.

Previously, whenever I wanted to test how a new Component, or changes I’d made to an existing, affected my website. I’d have two options.

1. Release a new version, either something like a pre-commit, or just a new version.
2. Copy and paste the bundled code into my project and update my imports to target the new temporary file

Not ideal, releasing a new version clutters version history, and if the released package contained bugs there was nothing you can do! Can’t delete the release. Rubbish. Alternatively copy and pasting the code while easy, made it very hard to debug and adjust as the code was compiled and minified.

This got me thinking — how do the others do it?

While this may not be the best way, it’s sure simplified my development process, making visualisation of my Components simple!

Yarn link

The first piece of the puzzle, how do you target your package locally?

This one was easy, Yarn (or npm) has a handy command link

This will register your package locally, ready for you to consume it, it’s worth nothing to do this in your output file, where your build command’s destination is (in my case it’s dist ).

Note: The name of your link is the same as what’s defined in package.json under name

➜  (YOUR_PACKAGE/dist) yarn link
yarn link v1.22.17
success Registered "YOUR_PACKAGE".
info You can now run `yarn link "YOUR_PACKAGE"` in the projects where you want to use this package and it will be used instead.
✨  Done in 0.04s.

From here, you can navigate to the projects root where you consume the package and run yarn link YOUR_PACKAGE

➜  YOUR_PROJECT ✗ yarn link YOUR_PACKAGE
yarn link v1.22.17
success Using linked package for "YOUR_PACKAGE".
✨  Done in 0.04s.

Brilliant, now when you run your dev server it will use your local files instead of what’s in node_modules 👍

If this works out the box, fantastic! Jobs done! However…
If like me your component library AND your project use React you might have some issues. Namely a little error around invalid hook use…

Invalid Hook Call Warning - React

Ah, point 3.

You might have more than one copy of React in the same app.

Yes we do, so how do we combat this? Enter Craco.

Craco

The solution to multiple instances of React is by updating your webpack config, but we’re using create-react-app. The only way to update this is to eject and for a single change we don’t really want to do that!

Create React App Configuration Override, aka Craco is a package which will handle all the config modifications for you. Meaning you don’t need to eject and delve into the intricices of the config.

First, installation. Nice and simple!

yarn add @craco/craco

We need to update our start scripts to now use craco instead of react-scripts , in package.json , update the following.

Now we can set our React alias so multiple mentions of React are unified to a single source, to do so we create a new file named craco.config.js at our projects root.

Running your dev server, you might get another error, that React is defined outside of the src folder. No issue, another little tweak with Craco can fix this. Update your config file to the following, adding the configure property!

And you should be all set! Start up your dev server and view your components locally 🎉 Happy developing!