2 min read

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
āœØ  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! šŸŽ‰

Know you should be immutably updating state in React,
but not sure what the best way is?

Get a handy reference of the most common state update operations and anti-patterns to watch out for šŸ•µšŸ»ā€ā™€ļø

Drop in your email below to get a printable PDF with the cheatsheet. I'll also let you know whenever I publish a new blog post.

React Immutable State Updates Cheatsheet