Getting warning when installing packages for unmet peer dependencies even though they are added in node modules

[rahul3103]

yarn add eslint-config-airbnb                                                     
yarn add v1.19.1
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "eslint-config-airbnb > eslint-config-airbnb-base@14.0.0" has unmet peer dependency "eslint-plugin-import@^2.18.2".
warning " > eslint-config-airbnb@18.0.1" has unmet peer dependency "eslint-plugin-import@^2.18.2".
warning " > eslint-config-airbnb@18.0.1" has unmet peer dependency "eslint-plugin-jsx-a11y@^6.2.3".
warning " > eslint-config-airbnb@18.0.1" has incorrect peer dependency "eslint-plugin-react-hooks@^1.7.0".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 3 new dependencies.
info Direct dependencies
└─ eslint-config-airbnb@18.0.1
info All dependencies
├─ confusing-browser-globals@1.0.9
├─ eslint-config-airbnb-base@14.0.0
└─ eslint-config-airbnb@18.0.1
✨  Done in 3.24s.

yarn add styled-components@beta
yarn add v1.19.1
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "styled-components > stylis-rule-sheet@0.0.10" has unmet peer dependency "stylis@^3.5.0".
warning " > styled-components@5.0.0-rc.1" has unmet peer dependency "react-is@>= 16.8.0".
[4/4] 🔨  Building fresh packages...
success Saved 1 new dependency.
info Direct dependencies
└─ styled-components@5.0.0-rc.1
info All dependencies
└─ styled-components@5.0.0-rc.1
✨  Done in 3.19s.

[boatcoder]

Something very similar happening in my project too.

Just limiting myself to this one dependency, since I think a lot of the others will resolve similarly. The app will start and work, storybook will start and work, but yarn is tossing too many of these warnings and I'm not sure the "right" way to make them go away. I'm building an app, not a library

My Version of yarn is 1.17.3 A similar issue was mentioned as fixed in https://stackoverflow.com/questions/48297518/yarn-warning-package-has-unmet-react-peer-dependency but that involved v1.4 as the solution

warning " > storybook-react-router@1.0.8" has unmet peer dependency "react-router@^4.0.0||^5.0.0".

react-router 5.1.2 is installed but not listed as a dependency because
react-router-dom 5.1.2 is listed as a dependency and brings along react-router as one of it's dependencies.

"storybook-react-router": "^1.0.8" is listed in devDependencies and is only needed for storybook.

To me it seems like this is a spurious warning but I have 24 of these warnings and I'm wondering how I should resolve them correctly. Since I don't directly depend on react-router, it seems wrong to just throw it into my dependencies list not to mention I now have 2 packages that could begin to drift apart in version because I'm specifying the versions directly instead of letting the package I'm actually use be the version I specify.

You can reproduce this with the following package.json

{
  "name": "sample",
  "version": "1.0.0",
  "description": "Shows a problem with yarn",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-router-dom": "^5.1.2",
    "storybook-react-router": "1.0.8"
  }
}