Stop 17 · Build ToolsTopics · 9/9

Yarn

In short

Yarn was built to fix npm's early problems with speed and consistency. Many older repos and big monorepos still use it, so you should be comfortable with its commands.

An alternative JavaScript package manager (originally created to fix early npm issues) offering fast installs, workspaces, and either classic or modern (Berry) modes.

The jaadu compares an old chunky phone with a sleek new phone.

Think of it like this

Two versions of the same app

Like your parents on an old WhatsApp version while you're on the new one, Yarn has two worlds. Yarn Classic (v1) works like npm. Modern Yarn (v2 and above) changes how packages are stored. Check which one your project uses before you Google errors.

Watch it happen

Yarn Classic vs modern Yarn

Yarn Classic (1.x)

Uses a normal node_modules folder
Works much like npm
Maintained, but no new features

Modern Yarn (2+)

Configured through .yarnrc.yml
Can use Plug'n'Play, no node_modules
Strict about undeclared dependencies

Check yarn --version first. The docs and fixes you need depend on which Yarn you have.

The big ideas

What you need to know

Yarn Classic

Version 1.x uses a normal node_modules folder and is now only maintained, not getting new features.

Modern Yarn (Berry)

Yarn 2 and above is configured through .yarnrc.yml and can use Plug'n'Play instead of node_modules.

Plug'n'Play

PnP replaces node_modules with a map file that tells Node exactly where each package lives.

yarn.lock

Like other lock files, it pins exact versions. Commit it to Git.

See it in code

Walk through the code

bash

1yarn --version          # 1.x means Classic, 2+ means modern Yarn2yarn install            # install dependencies3yarn add react-query    # add a dependency4yarn add -D prettier    # add a dev dependency5yarn build              # run the "build" script (no "run" needed)6 7# Modern Yarn in CI: fail if yarn.lock would change8yarn install --immutable

1/4Find out which Yarn you're on before following any guide.

Classic Yarn uses --frozen-lockfile for the same CI check. Running yarn --version first tells you which set of docs to follow.

Save yourself the pain

Common mistakes

Oops

Following a Yarn 1 tutorial in a project that uses Yarn 4.

Do this instead

Check yarn --version and the packageManager field first. Many commands and config files differ between Classic and modern Yarn.

Oops

Assuming your editor or tools will find packages when Yarn uses Plug'n'Play.

Do this instead

Run yarn dlx @yarnpkg/sdks vscode for editor support, or set nodeLinker: node-modules in .yarnrc.yml.

Your mission

Spot the Yarn flavour

~15 min

Quick check

You clone a repo and see a .pnp.cjs file but no node_modules after install. What's going on?

Go deeper

1Install a project's dependencies with Yarn and compare the lockfile to npm's.
2Learn Yarn Workspaces for managing a monorepo with multiple packages.
3Understand that npm, pnpm and Yarn today are largely interchangeable for most projects.