npm outdated output colour-coding meaning

Due to SemVer ^x.y.z caret format, red colors clearly indicate that packages are out of date, and they need to be upgraded. And yellow ones indicate that packages are out of date as well, but to upgrade, there might be breaking changes....

All packages in red should be upgraded first, then upgrade ones in yellow, because of the possibility of breaking change.

https://realguess.net/2014/12/13/update-outdated-npm-packages/


https://docs.npmjs.com/cli/v8/commands/npm-outdated#description

  1. Red means there’s a newer version matching your semver requirements, so you should update now.
  2. Yellow indicates that there’s a newer version above your semver requirements (usually new major, or new 0.x minor) so proceed with caution.

You have to be careful when depending on packages that are Github-hosted: if you're just pointing to the master branch of a package (which is the default when adding such dependencies), you can get in all sorts of trouble when that branch is updated and it's either not functional (it happens) or it breaks backward compatibility (that happens too).

I think this is what npm is trying to tell you.

FWIW, you should always include an identifier to a particular commit/tag/sha when you're dealing with Github-hosted dependencies. See this for more documentation. Although I doubt that npm won't also mark these URL's as red, because it's still possible for any of those identifiers to get invalidated.

EDIT: perhaps not quite.

Looking at it a little closer, it'll show the package name in red if the installed version doesn't (semver-)match the required version as set in package.json. In case of Github-hosted packages these will probably never match, hence the red.

Yellow is used when the installed version matches the required version, but there's a more recent version available in the NPM repository.