Serdar ŞEN's Blog

How to fix “has incorrect peer dependency” warning using yarn

How to fix “has incorrect peer dependency” warning using yarn

Serdar ŞEN's photo
Serdar ŞEN
·

2 min read

I used to be afraid of bash warnings popping up when managing a React codebase. Now I realize how meaningful and helpful they are : )

To reproduce the warning and fix the issue we will work with an empty vite react-ts project and a vite plugin named vite-plugin-svgr using yarn 1.22.19

Reproduce

Initialize the project

yarn create vite yarn-playground --template react-ts
cd yarn-playground

Add the plugin

yarn add vite-plugin-svgr@2.2.2

Now we can see the warning

warning " > vite-plugin-svgr@2.2.2" 
has incorrect peer dependency "vite@^2.6.0 || 3".

Fix

Check the current version of the vite

yarn info vite version 
#4.1.1

Check the current peer dependencies of the plugin

yarn info vite-plugin-svgr@2.2.2 peerDependencies 
# { vite: '^2.6.0 || 3' }

Our version is out of scope.

Check available versions of the plugin

yarn info vite-plugin-svgr versions
# [..., '2.4.0']

Check if the latest plugin has our vite as a peer dependency

yarn info vite-plugin-svgr@2.4.0 peerDependencies
# { vite: '^2.6.0 || 3 || 4' }

As you can see vite@^4.1.1 is within the peer dependency boundaries of vite-plugin-svgr@^2.4.0.

Upgrade the plugin

yarn upgrade vite-plugin-svgr@^2.4.0

Now we can see the warning is gone.

Conclusion

Thank you for reading! I hope you have found this post helpful.

Reference

YarnReactvite