Multiple versions of the same dependency in Yarn resolutions

Setup

I was working with Yarn 2 workspaces monorepo recently, and I needed to install a different version of React in different workspaces. The setup for that is straightforward. In each workspace’s package.json file, you set the dependency versions as usual. For this example, I have project-one and project-two with different versions of React.

{
  "name": "project-one",
  "dependencies": {
    "react": "^17.0.0"
  }
}

{
  "name": "project-two",
  "dependencies": {
    "react": "^18.0.0"
  }
}

Dealing with resolutions

For reasons, we needed to set resolution rules for React to ensure that we were installing the correct version.

Here’s the rub: Yarn only allows you specify resolutions in the root workspace, and we needed separate resolution rules for each of the major versions of React that we are using.

To do that, you need to use the following syntax:

{
  "resolutions": {
    "react@^17.0.0": "17.0.2",
    "react@^18.0.0": "18.2.0"
  }
}

In general, if your dependency is listed in dependencies or devDependencies like this:

{
  "dependencies": {
    "<name>": "<range>"
  }
}

Then you can write a resolution rule like this:

{
  "resolutions": {
    "<name>@<range>": "<resolve-range>"
  }
}

A note about “yarn set resolution”

The yarn set resolution command can be used to update the installed version of your dependency, and it will update your yarn.lock file. However, be warned that the -s, --save flag for this command is not implemented yet at the time of writing. So if you are like me and wondering why your root package.json is not being updated by this command, that is why!