Sharing React Components with Bit

Lessons learned in sharing my first react component

4 min readMay 14, 2020

At my current company, we have three products with similar components and functionality. During our last sprint, I devoted some time to investigating how we might use https://bit.dev to share components across these projects. The following is a summary of the setup and a few gotchas I ran into along the way.

Setup

The bit getting started docs (https://docs.bit.dev/docs/quick-start) cover how to do this in detail. Here are the basics:

Create bit.dev account
Create a collection
Initialize bit in a project (make sure to run bit login after installing bit-bin)
Refactor component into the preferred bit structure
bit build & bit export

I selected one of our more complex components to start with because I’m a sucker for punishment. It combines a search input with displaying a list of results where the user can select a single result. It does a little more than that behind the scenes, but those are the basics.

Obstacle #1 — The default bit React compiler does not contain all of the Babel plugins that we use in our components

My component built locally, but it did not build once I exported it to my collection. This led to a lot of confusing and cursing. Finally, I figured out that the React compiler for bit does not include the same .babelrc settings that are included in react-scripts. Once I figured that out, it was a few more hours of modifying the react compiler for bit to include the Babel plugins that I needed.

I could have modified our code to not use that syntax (in this case the ?? nullish coalescing operator), but that felt like a cheap fix that would ultimately cause more problems in the long term.

I could not figure out how to cleanly use the bit import command for importing the compiler and modifying it. It kept bringing in a lot of extra files that did not make sense to me. Instead, I forked the https://github.com/teambit/envs repository, cleaned out the compilers I did not need, modified the .babelrc file in the react compiler and exported it to my own collection: https://bit.dev/coterie/compilers/react-updated.

From there, I modified my original component project to use the new compiler instead of the standard one. Bit makes this pretty easy to do with an update to the package.json file:

"bit": {
  "env": {
    "compiler": "coterie.compilers/react-updated@0.0.2"
  },
  ...
}

After that, I built my component, tagged it with a new version and exported it to my bit collection:

bit build industry-search
bit tag industry-search (this command automatically updates to the next minor version number)
bit export coterie.partner-ui

Once the component was exported, I was ready to use it in our other project. This was a pretty simple process of installing the package with npm and updating the parent component to use the component from bit. There was a little bit of back and forth between projects as I realized changes that I needed to make. Making changes to the shared component was quick and easy though. Finally, I landed on a version that worked across both projects and included the flexibility to be styled how I needed for each.

Obstacle #2 — To install a bit component using npm, you need a bit account setup (ie CI systems need some extra setup to get `npm install` to work)

Everything was working for me locally, so it was time to push up a commit for code reviews! I pushed up and our build process was triggered. It failed almost immediately.

npm ERR! 404 Not Found - GET https://registry.npmjs.org/@bit%2fcoterie.partner-ui.industry-search - Not found

That was my error. My package could not be found. WTF? I deleted it and installed again locally. No issue. I moved to a different project locally and installed again. Again no issue. Double WTF? I went to the #technical-support channel on Slack and asked about it there. Within a 15 minutes I had a response:

Turns out I did not read the docs about configuring a CI system: https://docs.bit.dev/docs/ci#config-npmrc-on-ci

I added the .npmrc file, and set up my BIT_TOKEN env variable. Problem solved!

Establishing a Work Flow

One of the main questions I had going into this experiment, was about the work flow we would use. The bit docs outline a few options for this: https://docs.bit.dev/docs/workflows/workflows

For now, we are going to go with the Ad-hoc / Project work flow: https://docs.bit.dev/docs/workflows/projects while we build up our component collection. Here is the description from their documentation.

I hope this was helpful to anyone looking for a solution for component sharing. Overall, my experience has been very positive. I considered creating a node package instead, but the simplicity of the bit cli, the component hosting pages (with documentation and usage examples), and the fantastic support by their team have sold me on Bit for now.

I would love to hear any feedback or suggestions!