yarn: when pack makes more sense than link

I’ve now run into situations where I’ve needed to use Yarn’s pack command a few times.

As it frequently catches me by surprise, I wanted to document some ways to determine whether or not you need to use pack in place of Yarn’s link (which for the time being I’m treating as equivalent to NPM’s link).

How To Know If You’ll Need Pack

A rule of thumb that I’ve started using is: If the library or application that you’re trying to connect manages state internally, use pack.

Examples of applications / libraries like this include: anything that has its own implementation of react-router or the use of custom React hooks.

Identifying The Problem

It can be difficult diagnosing the problem and drawing the line back to the fact that you’re linking packages.

In my experience it’s much easier to figure out something’s broken than hone in on the cause being the link. This is why the rule of thumb above is good to keep in mind.

Still, let’s look at some examples I’ve run into:

React Router

I was using a <Breadcrumb> component from my Library in my App. The <Breadcrumb> uses a <Link> component from react-router under the hood.

When I linked my Library to an app to test out the new code, I started getting errors:

Uncaught Error: Invariant failed: You should not use <Route> outside a <Router>

This made no sense as my code was definitively under a <Router>. In fact, the stack trace even said as much.

This was the indication that it wasn’t my code, but that something else was going on. Enter Yarn pack.

React

My Library’s Webpack is configured to not include devDependenc[ies]. react and react-dom, also peerDependenc[ies] are noted with require statements:

/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
  /*! react */ "react",
)
/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
  /*! react-dom */ "react-dom",
)

This didn’t happen when I linked.

After linking the library to my app, I was immediately confronted with React yelling in the console:

index.js:formatted:1 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a    function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app

Inspecting the source files, I did find multiple references to react and react-dom.

The suspicion is that this occurred because both are listed as both devDependency and peerDependency. While Webpack handles this during publish, yarn link did not respect the restriction and/or did not understand that it should not include the devDependency when linking.

In either case, I needed a solution that wouldn’t use multiple versions of react. Enter Yarn pack.

Wrap Up

Linking’s great. When it works. When it doesn’t, reach for Pack.