Fixing NPM err extraneous error

Introduction

With most NPM/ Node projects, I like to keep my packages clean and not having duplicates or unused libraries.

One way to check what packages you have in your project, is to go to the root directory and run:

npm list

This will list out all of the packages used by your project. One common issue that comes up is the dreaded extraneous error:

npm ERR! extraneous

A more verbose error could look something like:

$ npm list --depth=0

....
├── abbrev@1.0.4
├── ansi@0.2.1
├─...
├──
├── graceful-fs@2.0.2
├── inherits@2.0.1
├── ini@1.1.0
├─┬ init-package-json@0.0.14
│ └── promzard@0.2.1
├─┬ jshint@2.4.4 extraneous
│ ├─┬ cli@0.4.5
│ │ └─┬ glob@3.2.9
│ │   └── inherits@2.0.1
│ ├── console-browserify@0.1.6
│ ├── exit@0.1.2
│ ├─┬ htmlparser2@3.3.0
│ │ ├── domelementtype@1.1.1
│ │ ├── domhandler@2.1.0
│ │ ├── domutils@1.1.6
│ │ └─┬ readable-stream@1.0.26-2
│ │   └─... ├── text-table@0.2.0
├── uid-number@0.0.3
└── which@1.0.5

npm ERR! extraneous: jshint@2.4.4 C:\Program Files\nodejs\node_modules\npm\node_modules\jshint npm

In the above error, we can see that jshint does not exist in the package.json file but will have packages in the node_modules folder!

Tip: Make sure to run npm list in the root

The npm list command expects you to be in the root of the project - eg containing the node_modules folder.

Understanding npm ERR! extraneous meaning?

So what does this error exactly mean? We are getting this error because the packages that live in our node_modules folder does not match the ones in the package.json file.

If you go through tutorials on NPM blogs, they usually have outdated information to install packages with the --save flag

npm install --save

With NPM versions that is older than version NPM version 5, we need to have the --save flag. This just means that we want to install the packages and save them in the node_modules folder AND also update our package.json of the dependency.

The extraneous error comes up because people have been doing npm installs without the --save flag.

As an example, if you run the following command:

  
npm install express --save

After running this command, the express package will be installed in your project’s node_modules directory, and your package.json file will be updated to include it as a dependency:

  

{
  "name": "my-app",
  "version": "1.0.0",
  "dependencies": {
    "express": "^4.17.1"
  }
}

Now that is only relevent for NPM versions thats before version 5 (eg v4, etc). With NPM version 5+, we do not need the --save flag anymore, it will add it to the package.json by default.

To get around this error, we can do the following steps:

1. Upgrade to NPM version 5+
2. Manually install/uninstall the extraneous packages
3. Remove the node_modules folder rm -rf node_modules
4. Use npm prune
5. Clear cache with npm cache clean --force
6. Suppress the npm ERR! extraneous error with --silent

1. Upgrade to NPM version 5+

The quickest and easiest way to fix this error is to upgrade your NPM version.

1. Open up the terminal and run the command:

  
npm install -g npm@latest

2. Now run the command npm list to see if the extraneous packages are still there.
3. If there are still extraneous errors, then clear out the node_modules folder and then run npm install

2. Manually install/uninstall the extraneous packages

One option is to go through each of the extraneous packages and install or uninstall them depending on their use of in your project.

Lets consider the error log previously:

$ npm list --depth=0

....
├── abbrev@1.0.4
├── ansi@0.2.1
├─┬ jshint@2.4.4 extraneous
│ ├─┬ cli@0.4.5
│ │ └─┬ glob@3.2.9
│ │   └── inherits@2.0.1
│ ├── console-browserify@0.1.6
│ ├── exit@0.1.2
│ ├── ...
└── which@1.0.5

npm ERR! extraneous: jshint@2.4.4 C:\Program Files\nodejs\node_modules\npm\node_modules\jshint npm

Now this error is telling us that jshint is in our node_modules but not in the package.json.

If you are not using jshint, you can uninstall it by running the two commands:

• npm update - updates any packages to make sure we are dealing with the most recent
• npm uninstall jshint - remove jshint package

3. Remove the node_modules folder rm -rf node_modules

A simple solution that comes up with most NPM issues is to nuke the node_modules folder and package-lock.json file.

1. Open up the terminal and run the following command: rm -rf node_modules

2. Delete the package-lock.json file

3. Make sure you have upgraded to the latest version of NPM with npm install -g npm@latest

4. Run npm install for your project

4. Use npm prune to remove extraneous packages

In cases of NPM err extraneous errors - using the npm prune command can help remove extraneous packages. The prune command will remove any packages in the node_modules directory that is not listed in the package.json file.

As we develop the project - we can do alot of installing and uninstall packages. This can lead to packages being “orphaned” and not listed as a dependecy in the package.json file.

Here’s an example of running npm prune in a sample project:

npm prune <packagename>

So if we run npm prune jshint, it will remove the jshint package from your node_modules folder.

If you dont want to name all the packages we can just do npm prune

The full syntax of prune is:

npm prune [[<@scope>/]<pkg>...] [--production] [--dry-run] [--json]

Using --production flag

The –production flag will tell NPM to remove the packages specified in your devDependencies

5. Clear cache with npm cache clean --force

A option that we can try is to clear the NPM cache:

npm cache clean --force
npm i --force

Sometimes, your depencies are correct, but you still get the conflicting peer dependency error. This could be due to NPM still looking through the cached modules.

NPM usually stores modules in your local project folder and also a “cached” folder. This will be ~/.npm on linux/ OSX systems, or %AppData%/npm-cache for windows systems.

So the next time you install a similar module it will go off to the cache instead of downloading it! The above command just clears the cache folder.

6. Check globals and suppress the npm ERR! extraneous error with --silent

Usually this error can be treated more like a warning.

Sometimes you do not want to see this error when running on things like build or deploy servers.

In this case, we can use the --silent flag:

npm list --silent

This will give you a list of all the packages in the project but excludes the extraneous error messages!

Summary

In this article, we went over ways to fix the NPM err extraneous error that comes up when doing npm list.

It is good practice to keep your project clean and run npm list to make sure that we do not have any orphaned packages. The extraneous error message just means that we have extra packages in the node_modules folder and not listed in the package.json file!

To get around this issue, we should upgrade to the latest version of NPM with npm i npm@latest (versions 5+), use npm prune to remove extraneous packages, remove the packages manually or use npm uninstall <packagename>

If the previous options did not work, we can use the nuke approach and clear out the node_modules folder, remove the package-lock.json file and clear cache npm clear cache --force. We then make sure that we have a NPM version greater than 5 and run npm install