~3 min read|
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
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.
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:
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
My Library’s Webpack is configured to not include
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
The suspicion is that this occurred because both are listed as both
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
Linking’s great. When it works. When it doesn’t, reach for Pack.
Hi there and thanks for reading! My name's Stephen. I live in Chicago with my wife, Kate, and dog, Finn. Want more? See about and get in touch!