dependencies, peerDependencies, devDependencies

Photo by Hadyn Cutler on Unsplash

devDependencies are the dependencies which are needed for your project during development / release, such as testing libraries like Karma and Jasmine.

I understood better when I read given examples from this link.

Imagine a dependency triangle; where your projectA uses both libraryB and libraryC whereas library B uses libraryC.

Dependencies of projectA:

{
  "dependencies": {  
    "libraryB": "0.0.1",  
    "libraryC": "0.0.1"  
  }  
}

Dependencies of libraryB:

{
  "dependencies": {  
    "libraryC": "0.0.2"
  }  
}

When projectA and libraryB use different versions of libraryC, some problems may occur; for example, if you expose a class of libraryC as to send it as a parameter to a libraryB method. To warn users or other developers (usually new to the project), it is advised that you add your libraryC to peerDependencies section in your libraryB package.json. Maybe, here I should not use the word “warn” because npm simply does not install and it quits giving error just as below:

senoritadev:ngsd-projecta senoritadev$ npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @senoritadev/ngsd-libraryb@0.0.4
npm ERR! Found: @senoritadev/ngsd-libraryc@0.0.6
npm ERR! node_modules/@senoritadev/ngsd-libraryc
npm ERR!   @senoritadev/ngsd-libraryc@"file:/Users/senoritadev/dev/git-workspace/my-project/dist/ngsd-libraryc/senoritadev-ngsd-libraryc-0.0.6.tgz" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @senoritadev/ngsd-libraryc@"0.0.5" from @senoritadev/ngsd-libraryb@0.0.4
npm ERR! node_modules/@senoritadev/ngsd-libraryb
npm ERR!   @senoritadev/ngsd-libraryb@"file:/Users/senoritadev/dev/git-workspace/my-project/dist/ngsd-libraryb/senoritadev-ngsd-libraryb-0.0.4.tgz" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @senoritadev/ngsd-libraryc@0.0.5
npm ERR! node_modules/@senoritadev/ngsd-libraryc
npm ERR!   peer @senoritadev/ngsd-libraryc@"0.0.5" from @senoritadev/ngsd-libraryb@0.0.4
npm ERR!   node_modules/@senoritadev/ngsd-libraryb
npm ERR!     @senoritadev/ngsd-libraryb@"file:/Users/senoritadev/dev/git-workspace/my-project/dist/ngsd-libraryb/senoritadev-ngsd-libraryb-0.0.4.tgz" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/senoritadev/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/senoritadev/.npm/_logs/2021-09-09T11_06_27_601Z-debug.log

Before npm version 7, peerDependencies would not be installed in node_modules (folder of libraryB), you had to install them by placing it in dependencies section and then moving to peerDependencies but after version 7, this case disappears.

If you are not using libraryC in your projectA but you put libraryC in libraryB’s peerDependencies, then libraryB and libraryC (with the version libraryB is using) will be installed at the same level in projectA’s node_modules.

projectA  
└─┬ node_modules                
  └── libraryB@0.0.1
  └── libraryC@0.0.5

It is up to you to place your dependencies whether in dependencies or peerDependencies. If you don’t want to update your libraryB every time you are updating libraryC for projectA’s needs, then place them in dependencies section.

If you prefer to not to use peerDependencies, you may get an error like this:

ERROR: Dependency @senoritadev/ngsd-libraryC must be explicitly whitelisted.
An unhandled exception occurred: Dependency @senoritadev/ngym-globals must be explicitly whitelisted.

This is to warn you to move your common dependencies from dependencies to peerDependencies. Now, we are in a deadlock :) No, just kidding, you can add this config to your ng-package.json file (not package.json) to get rid of this error:

"whitelistedNonPeerDependencies": [
     "."
]

Or, you can add specific package scope names:

"whitelistedNonPeerDependencies": [
     "senoritadev"
]

After npm install, projectA node_modules will look like this:

projectA  
└─┬ node_modules                
  └── libraryB@0.0.1 
      └─┬ node_modules
        └──libraryC@0.0.3
  └── libraryC@0.0.5

Happy Coding!