In this tutorial, you will learn a little more about yarn and about package resolution. One benefit of using yarn is that it generates a yarn.lock file whenever a dependency is either added, upgraded, or removed from within a project. Having a yarn.lock file creates a repeatable and deterministic installation process. By committing the automatically generated yarn.lock file into source control, when another developer pulls that code they will use the same package. yarn.lock contains the state of the entire dependency tree for an application's packages at a point in time.

When working with yarn, it is common to install dependencies with either the ^ or ~ flags. To refresh your memory, when you see ^ used on a package version it means that during installation, yarn will install that package to a set version. If any additional minor patches get released for that package, the next time someone installs the application, yarn will auto-bump the version number and use that latest minor patch. For example, myPackage^1.0.1 will auto-bump to version myPackage^1.1.0. If you are unsure of the differences between minor and major patches, I recommend reading more on semantic versioning.

The issue with auto-bumping is that once in a while it may break things. For example, a unit test or snapshot test might randomly fail during the Ci/Cd build process. The failing test will be a head-scratcher. The test will likely be in an area of the code completely unrelated to the committed changes. A new minor patch will still change something, no matter how minor. If a component renders with a one-pixel difference, a visual test might break. Let us say you have this chain:

packageOne has these dependencies:

Both my-package and packageOne reference packageTwo. When two or more packages reference the same package, but with different versions, odd things can happen. If you encounter an issue like this you can use a resolution.

A resolution tells yarn to use a specific version of a package globally, regardless of what version is referenced within the applications package.json or any sub-packages package.json. If you encounter package mismatches, this trick can save you a lot of time. To set a resolution from the terminal you can use this command:

You may not need to use resolutions on a daily basis. Using a resolution will allow you to explicitly override package versions inside an application package dependency tree. More importantly, it will ensure sub-dependencies align. More information on resolutions can be found within the yarn documentation, here. Happy Coding!