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 "@firstname.lastname@example.org" 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?
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
❯ 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 └─ @email@example.com info All dependencies ├─ @firstname.lastname@example.org ├─ @email@example.com └─ @firstname.lastname@example.org ✨ Done in 42.21s.
yarn.lock will be updated after this command.
Aaand, we're done
yarn why @storybook/react or
yarn list --pattern @storybook/react will now reveal the new version is installed! 🎉