How to upgrade a yarn package to the latest version

It's happening again. You know you need to upgrade a package, but you're not sure what version is the latest and whether it will break your code or not 🙈

Let's walk through upgrading @storybook/react for a project.

First, check where you stand

What version are you at? What's the deal with this package?
We can see here the package is at version 5.3.9 - is this up to date, is this old?

❯ yarn why @storybook/react
yarn why v1.22.0
[1/4] 🤔  Why do we have the module "@storybook/react"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "@storybook/react@5.3.9"
info Has been hoisted to "@storybook/react"
info This module exists because it's specified in "dependencies".
info Disk size without dependencies: "5.25MB"
info Disk size with unique dependencies: "93.6MB"
info Disk size with transitive dependencies: "5.25MB"
info Number of shared dependencies: 471
✨  Done in 1.92s.

Next: how outdated is the package?

Luckily, yarn gives us the outdated command to check this. You can run it for all your dependencies or you can pass in a package name to check just for one package.

❯ yarn outdated @storybook/react
yarn outdated v1.22.0
info Color legend :
 "<red>"    : Major Update backward-incompatible updates
 "<yellow>" : Minor Update backward-compatible features
 "<green>"  : Patch Update backward-compatible bug fixes
Package          Current Wanted Latest Package Type URL
@storybook/react 5.3.9   5.3.9  5.3.14 dependencies https://github.com/storybookjs/storybook/tree/master/app/react
✨  Done in 6.03s.

Ok, let's upgrade

If you just do yarn upgrade @storybook/react now, it will keep using the version / rule specified in package.json (the "Wanted" version).

If we want to make sure the Latest gets installed and then also package.json is updated, we can specify the --latest flag:

❯ yarn upgrade @storybook/react --latest
yarn upgrade v1.22.0
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
[3/5] 🚚  Fetching packages...
[4/5] 🔗  Linking dependencies...
[5/5] 🔨  Rebuilding all packages...
success Saved lockfile.
success Saved 3 new dependencies.
info Direct dependencies
└─ @storybook/react@5.3.14
info All dependencies
├─ @storybook/core@5.3.14
├─ @storybook/react@5.3.14
└─ @storybook/ui@5.3.14
✨  Done in 42.21s.

Both package.json and yarn.lock will be updated after this command.

Aaand, we're done

Running yarn why @storybook/react or yarn list --pattern @storybook/react will now reveal the new version is installed! 🎉