If you use Node Package Manager to do React work and you are running
npm ls then the chances are you are debugging some horrible issue to do with dependencies.
You want to quickly sort this thing out and move on to the next thing. The ouput of
npm ls can be confusing, so let’s clear up what it does.
In this short article we will visit what
npm ls does, what it tells you and how to understand the output, so that you can move on and fix the issue at hand.
What is `npm ls`?
npm ls is a command that will list the packages that are installed as well as their dependencies in a tree structure.
You run this from the root folder of your project, and it shows you a tree that looks something like this:
firstname.lastname@example.org C:\projects\birthdays +-- @email@example.com +-- @firstname.lastname@example.org | +-- @email@example.com | `-- firstname.lastname@example.org +-- @email@example.com | +-- @firstname.lastname@example.org deduped | +-- email@example.com | `-- firstname.lastname@example.org +-- @email@example.com | `-- @firstname.lastname@example.org deduped
What this is showing is the actual versions of the npm dependencies you have installed.
package.json file you can specify precisely or roughly which versions of packages you can accept for your project.
npm ls command, doesn’t tell you whats in
package.json. Instead it tells you what the exact versions were installed, for both the packages in
package.json and the packages they use (their dependencies).
For example in the example above I am using
react-datepicker. This package makes use of
date-fns, and this is using version 2.16.1.
Why does this all matter? Well if you have a problem with some tool or library you are using, often people online will ask what versions of things you have installed. You can use this tool to provide that information to them.
You may see the same package multiple times, as in this example I recently saw in a forum post which has react shown twice:
email@example.com /path-to-repo/example/my-honey-starter ├─┬ firstname.lastname@example.org │ └─┬ email@example.com │ └── firstname.lastname@example.org deduped └── email@example.com
This has happened because the app is using react directly, and it also using gatsby which is using react. They are using the same version. Often this is no coincidence as libraries are often set up to use “peer dependencies” which in simple terms means “I’m happy to use the same version as the app uses”.
deduped means deduplicated, and just means that to avoid making the output from
npm ls bigger than it need to be it will only show the rest of tree for one of the
firstname.lastname@example.org packages. In this case there is no rest of the tree as react doesn’t have any further dependencies within npm.
If you are new to npm then don’t worry too much about remembering all this (you can bookmark this article). However just remember:
- It’s handy to run
npm lswhen asking for help with some problems online, so people know what versions you are using of stuff.
- It is OK and pretty normal to have react or anything else listed multiple times. This is sort of what npm is for. It’s the “node package manager” and it’s managing all this so you don’t have to.