What does `npm ls` show me? And why is React in there multiple times?

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:

client@1.0.0 C:\projects\birthdays
+-- @types/node@12.12.37
+-- @types/react@16.9.34
| +-- @types/prop-types@15.7.3
| `-- csstype@2.6.10
+-- @types/react-datepicker@3.1.1
| +-- @types/react@16.9.34 deduped
| +-- date-fns@2.16.1
| `-- popper.js@1.16.1
+-- @types/react-dom@16.9.6
| `-- @types/react@16.9.34 deduped

What this is showing is the actual versions of the npm dependencies you have installed.

In your package.json file you can specify precisely or roughly which versions of packages you can accept for your project.

The 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:

gatsby-starter-honey@1.1.1 /path-to-repo/example/my-honey-starter
├─┬ gatsby@2.24.60
│ └─┬ gatsby-cli@2.12.97
│   └── react@16.13.1  deduped
└── react@16.13.1

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”.

The word 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 react@16.13.1 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 ls when 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.