Peer Dependencies - Explained

Peer Dependencies in NPM are often used to aid package management for plugins. In this tutorial video we look at why peer Dependencies are needed and the benefits they proved, how to add peer Dependencies to the package JSON file and then how to resolve the warnings/errors that are associated with peer Dependencies during NPM installs.
00:55 Create Test Application
03:50 Push Test Application to NPM
04:10 Install and Test Application
05:00 Create Test Application Plugin
06:00 Publish Test Application Plugin to NPM
06:30 Scenario 1 - Happy Case App and Plugin work together successfully
07:15 Scenario 2 - App API is updated with breaking change - no Peer Dependency to help us
07:30 API changed in App and version changed to v1
08:30 Install V1 of App - No Errors or Warnings
08:50 Run time error!
09:40 Scenario 3 - Using Peer Dependency on Plugin
10:20 Update version of Plugin to 10.0.2
11:30 Peer Dependency Warning on attempting to install plugin against V1 of App
13:20 Scenario 4 - Installing Plugin with App V1 - peer dependency should warn/error
14:40 Install Plugin shows Error and blocks install
15:40 Force install of Plugin

[@pensandocomodev]

WOW! I'm currently going through that phase of updating my project's dependencies versions and needed to understand better about peerDependencies, because my company is using a monorepo, where it has multiple different libraries and some libraries depends on another libraries and eventually it all boils down to an app. I was just looking for this answer and bumped into your video and the way that you explained such a complex topic is mind blowing 🤯. You even got me thinking about another scenario that we have, when an application may opt-out of certain "sub dependencies" and really inspired me to keep on working on this task today. NPM library creation content are so difficult to find and yours was just **perfect**. tysm!!

[@pensandocomodev]

I do have one question though. Let's say I have an app that uses a library (created by me) that depends on the styled-components package. The styled-components package has a peerDependency "react-is". Should I add this peerDependency: a) as a *dependency* for my library? b) as a *peerDependency* for my library and as a *dependency* on my app? c) other - please explain

[@stephenhu118]

I like your examples which really helped me to understand what peer dependencies really are.

[@Ashotofcode]

Excellent, glad it was helpful :-) Cheers Mark

[@nyarlaaa]

Thanks for the helpful video. I've had to take over a project that hasn't been updated for years and with the "new" npm being more strict and angular's lackluster documentation it's been a right headache.

[@Ashotofcode]

Great to hear! Cheers Mark 🙂

[@Middollo]

Thank you! Great examples!

[@Ashotofcode]

Glad it was helpful! Cheers Mark

[@shubhsingh4935]

Thankyou, It really helped :)

[@Ashotofcode]

You're welcome!

[@mehmetsayn573]

what about using package.json overrides in this case ? is not it better than using force or peer deph ?

[@cairink2110]

I am updating my nextjs app and I installed(upgraded) packages with "--force" . It installed the packages, but "npm i" still gives the error. Will this be a problem when deploying on vercel?

[@Ashotofcode]

The error is just a warning once you have forced the install - just reminds you that there is no official support for the current setup you have and there may be mismatches. When you deploy as long as you are not running npm on the sever and just pushing up the locally built package then should be fine. Cheers Mark

[@justkaz7104]

105

[@juanfut11]

Wasted 18 minutes for nothing