What does 'has unmet peer dependency' mean when installing a package with yarn?

Question

I have a fresh install of yarn (via npm install yarn -g) and tried to install a few packages with

yarn add vue-loader babel-loader style-loader css-loader file-loader webpack

I then got a few warnings during the installation, such as

warning "vue-loader@13.3.0" has unmet peer dependency "vue-template-compiler@^2.0.0".

A sister question (about npm) on the same subject yields a few answers which suggest to

1. update npm
2. remove node_modules as there is a bug in npm about handling dependencies.

I cannot discard the packages in the warnings, as the webpack build fails, which leads to me having to manually install them. At the same time, quite a few dependencies were installed so I do not understand why these were not installed.

What does the above warning mean, and why doesn't yarn install these dependencies on its own?

Answer 1

As others have mentioned, peer dependencies are other packages required by a library that must be added to the dependencies of the parent package rather than directly within the library.

To resolve this warning you should run yarn add <package> for each <package> that is complained about. Below is an example.

Original output from yarn install:

$ yarn install
yarn install v1.22.15
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "linux" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > react-markdown@8.0.3" has unmet peer dependency "@types/react@>=16".
warning "react-scripts > eslint-config-react-app > eslint-plugin-flowtype@8.0.3" has unmet peer dependency "@babel/plugin-syntax-flow@^7.14.5".
warning "react-scripts > eslint-config-react-app > eslint-plugin-flowtype@8.0.3" has unmet peer dependency "@babel/plugin-transform-react-jsx@^7.14.9".
warning "react-scripts > react-dev-utils > fork-ts-checker-webpack-plugin@6.5.2" has unmet peer dependency "typescript@>= 2.7".
warning "react-scripts > eslint-config-react-app > @typescript-eslint/eslint-plugin > tsutils@3.21.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] Building fresh packages...
Done in 8.91s.

Commands to resolve the warnings:

yarn add '@types/react@>=16' '@babel/plugin-syntax-flow@^7.14.5' '@babel/plugin-transform-react-jsx@^7.14.9' 'typescript@>= 2.7' '@babel/core@^7.0.0-0' 'typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'

You can now run rm -rf node_modules/ && yarn to test if the output is clean:

$ yarn
yarn install v1.22.15
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "linux" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 9.05s.

Note that you may notice that you have to repeat this process if your newly added dependencies have any peer dependencies.

Answer 2

What is a peer dependency

Here is some useful reading on dependency types, and here is info on peer dependencies, but to summarize:

Dependency: A library/package your project needs to run.
Peer dependency: Used to indicate a library/package your project will hook in to.

The package vue-loader has a peer dependency on vue-template-compiler - vue-loader acts as a plugin for vue-template-compiler

Why aren't peer dependencies installed by default

Peer dependencies were automatically installed up until npm@3 (which yarn has followed in). This was stopped due to frequently confusing behavior. For example, installing another plugin with a conflicting requirement would result in an error.

We will also be changing the behavior of peerDependencies in npm@3. We won’t be automatically downloading the peer dependency anymore. Instead, we’ll warn you if the peer dependency isn’t already installed. This requires you to resolve peerDependency conflicts yourself, manually, but in the long run this should make it less likely that you’ll end up in a tricky spot with your packages’ dependencies. [Feb 13, 2015]

Update

As per here npm@7 now installs peer dependencies.
For the motivation behind this decision see here

Answer 3

Running yarn install --check-files or just yarn install can fix the issue and install the missing depecendencies.

Explicitly adding to your package.json may also be an option.

Reference https://github.com/yarnpkg/yarn/issues/4594#issuecomment-763475899