Back
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 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! šŸŽ‰

Clear, straight to the point tutorials, straight to your inbox

Enter your email below to receive new articles as soon as they are published!