Angular Browserslist: caniuse-lite is outdated. Please run next command `npm update`

Question

I have recently started getting this error on a Angular 8 project (node v10.16.0) I am working on. Running npm update caniuse-lite browserslist did nothing

So I removed package-lock.json, removed node_modules and ran npm install, but browserlist file has gone. Again when I run ng build, I get same message: Browserslist: caniuse-lite is outdated. Please run next command npm update

I see this post on same topic: Browserslist: caniuse-lite is outdated. Please run next command `npm update caniuse-lite browserslist` However, it talks about WebCompiler and autoprefixer and I have no idea of those. Please guide

Answer 1

Solved caniuse-lite outdated problem by running below commands.

npm cache clean  # optional
npm install caniuse-lite@latest --save

Answer 2

TLDR: (may seem counter-intuitive without the explanation)

  npm install caniuse-lite browserslist
  npm uninstall caniuse-lite browserslist

Explanation:

This warning msg ("canisuse-lite is outdated, please ....") is output by scripts in browserslist during build/start if it finds the installed version of caniuse-lite is older than 2 versions from the current version. If nothing in your project changed and you suddenly see this msg when starting or building your project, it probably means there was a recent version update to caniuse-lite.

Unfortunately, the text msg that browserslist displays is only helpful if you installed caniuse-lite as a dependency of your project. Most likely, you did not. So when you run the suggested 'npm update caniuse-lite' or 'npm update 'caniuse-lite@latest' (or 'npm install'), npm doesn't see that package listed in your package.json dependencies, so it ignores the request.

How did those packages become dependencies then? When your project was created (maybe with app angularapp or create-react-app or similar for your framework), npm installed browserslist as a dependency of its needed tools, not as one of your project's dependencies. At the same time, caniuse-lite was installed as a dependency of browserslist. Later when the project was updated, a package-lock.json file was created which locks all dependencies to a specific version.

If you were able to update the version information in the list of dependencies in package-lock.json, then running 'npm install' would update these packages in node_modules. You should not edit package-lock.json manually. Instead, the best way to do that is:

1. Temporarily make these packages a dependency of your project:

   npm install caniuse-lite browserslist

   In addition to updating the package to the latest version, this updates the dependency list in both package.json and (most importantly) package-lock.json.

2. Remove these packages as direct dependencies of your project:

   npm uninstall caniuse-lite browserslist

   Since these packages are used by other dependencies, they are not removed from node_modules. Only package.json is updated to remove them as a project dependency.

3. Commit package-lock.json. Anyone else can now just run 'npm install' to get the updated two packages from list of sub dependencies in package-lock.json, and stop the warning msg.