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

Npm Problem Overview

Recently, when I compile my scss files I get an error. The error message says:

> Browserslist: caniuse-lite is outdated. Please run next command npm update caniuse-lite browserslist

First, as the message says, I ran npm update caniuse-lite browserslist but it didn't fix the issue. I deleted the whole nod-modules directory and installed again, also I updated the whole folder by npm update but none of them solved the issue. I also reinstalled autoprefixer and browserslist but none of them solved the issue.

If I remove

"options": {
      "autoPrefix": "> 1%"
    }

from my compilerconfig.json, everything works fine which means probably it is related to autoprefixer. Also, I manually changed the package version to the latest version on package.json and reinstalled but no luck.

Npm Solutions

Solution 1 - Npm

Try this it solved my problem npx browserslist@latest --update-db

Solution 2 - Npm

It sounds like you are using Visual Studio's Web Compiler extension. There is an open issue for this found here: https://github.com/madskristensen/WebCompiler/issues/413

There is a workaround posted in that issue:

Close Visual Studio
Head to C:\Users\USERNAME\AppData\Local\Temp\WebCompilerX.X.X (X is the version of WebCompiler)
Delete following folders from node_modules folder: caniuse-lite and browserslist Open up CMD (inside C:\Users\USERNAME\AppData\Local\Temp\WebCompilerX.X.X) and run: npm i caniuse-lite browserslist

Solution 3 - Npm

For Angular Developers

Although, I'm answering this very late. I have a bad habit of checking changelogs of every library I use  and while checking the release notes of Angular CLI, I figured out that they released a new patch yesterday (9th Jan 2020) which fixes this issue.

https://github.com/angular/angular-cli/releases/tag/v8.3.22

So when you will run ng update, you should get updates for @angular/cli:

And running ng update @angular/cli will fix this warning.

Cheers!

Solution 4 - Npm

Many advise you to remove the package-lock.json or the yarn.lock. This is clearly a bad idea!

I am using Yarn and I was able to correct this problem by removing only the caniuse-db and caniuse-lite entries in my yarn.lock and doing a yarn.

It is not necessary to break the main function of the lockfile by deleting it.

Solution 5 - Npm

Simple, safe solution

The answer from @Alexandr Nil is safe, and was effective for me. I am writing as a full answer because it is easy to miss his comment.

npm --depth 20 update --save caniuse-lite browserslist

This is good because:

There is no deletion of package-lock.json. Deleting that would leave you vulnerable to many packages getting upgraded with breaking changes, and you have a much bigger headache than you had before!
It is easy to understand exactly what it is doing, because it is explicit and very limited on what is to be updated.
It avoids the very large depth of 99 or 9999 which will work on some projects and systems, but not on others. If you have limited the depth to too small a number, it will not break anything. You can increase the depth and try again, until the project compiles successfully. I don't know whether I actually needed 20, or could have managed with a smaller depth, such as 5 or 10. But with a depth of 20 took less than a minute to run.
It is quick and easy!

Thank you to @Zbyszek for suggesting to add the "--save" option. And yes, --depth is currently deprecated, but I assume they will replace it with something else rather than entirely remove it, so for now this seems to be the least destructive approach.

Solution 6 - Npm

I found a short cut rather than going through vs code appData/webCompiler, I added it as a dependency to my project with this cmd npm i caniuse-lite browserslist. But you might install it globally to avoid adding it to each project.

After installation, you could remove it from your project package.json and do npm i.

Update:

In case, Above solution didn't fix it. You could run npm update, as this would upgrade deprecated/outdated packages.

Note:

After you've run the npm update, there may be missing dependencies. Trace the error and install the missing dependencies. Mine was nodemon, which I fix by npm i nodemon -g

Solution 7 - Npm

Continuation of answer above.

Had the same "plugin error" as @MehrdadBabaki. I uninstalled web compiler, deleted the AppData WebCompiler folder mentioned above, then reopened VS2019 and reinstalled web compiler.

THEN I went to the WebCompiler folder again and did npm i autoprefixer@latest npm i caniuse-lite@latest and npm i caniuse-lite browserslist@latest

Solution 8 - Npm

npm --depth 9999 update fixed the issue for me--apparently because package-lock.json was insisting on the outdated versions.

Solution 9 - Npm

In my case, I deleted out the caniuse-lite, browserslist folders from node_modules.

Then I type the following command to install the packages.

npm i -g browserslist caniuse-lite --save

worked fine.

Solution 10 - Npm

There is an environment variable >= 4.5.4, BROWSERSLIST_IGNORE_OLD_DATA, that you can set truthy to suppress the warning (BROWSERSLIST_IGNORE_OLD_DATA=true). See commit Add BROWSERSLIST_IGNORE_OLD_DATA environment variable.

Here's a snippet of the relevant code from that commit showing the early bailout upon checking this environment variable:

module.exports = {
  // ...
  oldDataWarning: function oldDataWarning (agentsObj) {
    if (dataTimeChecked) return
    dataTimeChecked = true
    if (process.env.BROWSERSLIST_IGNORE_OLD_DATA) return

    // ...
    console.warn(
      'Browserslist: caniuse-lite is outdated. ' +
      'Please run next command `' + command + '`'
    )
    // ...
  }
  // ...
}

Solution 11 - Npm

As mentioned in Scott Kuhl's answer this issue is mentioned in https://github.com/madskristensen/WebCompiler/issues/413

For me, running the command npm i caniuse-lite- browserslist only worked for about 1/2 a day before it was an issue again.

The following solution, mentioned in the post, works much better. This updates the node.js file so that it uses console.log instead of console.warn when returning these errors.

You can manually update this file located at C:\Users\[Username]\AppData\Local\Temp\WebCompiler[VersionNumber]\node_modules\browserslist

Or, so that it is done automatically, add the following to your .csproj file by:

Right click on project file and select "Unload Project"
Edit the .csproj file
Paste the following into the project file. I pasted it towards the end of the file, before the </Project> end tag and before the build web compiler package was imported.

    <ItemGroup>
    	<PackageReference Include="MSBuildTasks" Version="1.5.0.235">
    		<PrivateAssets>all</PrivateAssets>
    		<IncludeAssets>runtime; build; native; contentfiles; analyzers</IncludeAssets>
    	</PackageReference>
    </ItemGroup>
    <PropertyGroup>
    	<TempFolder>$([System.IO.Path]::GetTempPath())</TempFolder>
    </PropertyGroup>
    <ItemGroup>
    	<BrowsersListNodeJsFiles Include="$(TempFolder)\WebCompiler*\node_modules\browserslist\node.js" />
    </ItemGroup>
    <Target Name="BrowsersListWarningsAsInfo" BeforeTargets="WebCompile">
    	<FileUpdate Files="@(BrowsersListNodeJsFiles)"
    				Regex="console.warn"
    				ReplacementText="console.log" />
    </Target>

Reload the project back into the solution.

Solution 12 - Npm

I had same problem too this command works for me

npm i autoprefixer@latest

It automatically added need dependency in package.json and package-lock.json file like below:

package.json

"autoprefixer": "^9.6.5",

package-lock.json

"@angular-devkit/build-angular": {

...

"dependencies": {
    "autoprefixer": {
      "version": "9.4.6",
      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.4.6.tgz",
      "integrity": "sha512-Yp51mevbOEdxDUy5WjiKtpQaecqYq9OqZSL04rSoCiry7Tc5I9FEyo3bfxiTJc1DfHeKwSFCUYbBAiOQ2VGfiw==",
      "dev": true,
      "requires": {
        "browserslist": "^4.4.1",
        "caniuse-lite": "^1.0.30000929",
        "normalize-range": "^0.1.2",
        "num2fraction": "^1.2.2",
        "postcss": "^7.0.13",
        "postcss-value-parser": "^3.3.1"
      }
    },

...

  }

...

"autoprefixer": {
    "version": "9.6.5",
    "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.6.5.tgz",
    "integrity": "sha512-rGd50YV8LgwFQ2WQp4XzOTG69u1qQsXn0amww7tjqV5jJuNazgFKYEVItEBngyyvVITKOg20zr2V+9VsrXJQ2g==",
    "requires": {
      "browserslist": "^4.7.0",
      "caniuse-lite": "^1.0.30000999",
      "chalk": "^2.4.2",
      "normalize-range": "^0.1.2",
      "num2fraction": "^1.2.2",
      "postcss": "^7.0.18",
      "postcss-value-parser": "^4.0.2"
    },

...
    
}

Solution 13 - Npm

I'm not exactly sure where my problem was, but I believe it was because I was using the same global packages from both npm and Yarn.

I uninstalled all the npm global packages, then when using yarn commands once again, the problem was gone.

To see global packages installed...

for npm:

npm ls -g --depth=0

for Yarn:

yarn global list

I then uninstalled each package I saw in the npm listing, using:

npm uninstall -g <package-name>

Solution 14 - Npm

The thing that worked for me is to first build the project like > npm run build

then run it like > npm run start

this will disappear error and application loading fine.

Solution 15 - Npm

I did downgrade the node version from 12 to 10

EDIT

This error occurred with me because I was using node version 12. When I downgrade to version 10.16.5 this error stops. This error happened in my local env, but in prod and staging, it not happens. In prod and staging node version is 10.x so I just do this and I didn't need to update any package in my package.json

Solution 16 - Npm

Deleting node_modules and package-lock.json and npm i solve the issue for me.

Solution 17 - Npm

I've fixed this issue by doing, step by step:

remove node_modules
remove package-lock.json,
run npm --depth 9999 update
run npm install

Solution 18 - Npm

Minimal solution that worked for me for current project

A create-react-app project
Ubuntu / *nix
2020
Node 14.7

delete node_modules/browserslist directory in the project

now

npm run build

no longer generates that message

Solution 19 - Npm

I downgrade node version, then reinstall node modules and problem has gone. In my case from 17.X to 14.5.0

Solution 20 - Npm

The below steps worked for me

rm -rf node_modules/
yarn
yarn upgrade caniuse-lite browserlist
restarting server & clear browser cache.

Solution 21 - Npm

To fix the issue you can type below command:

> 'npm -g update'

Solution 22 - Npm

If you use yarn:

yarn upgrade

Help for me

Content Type	Original Author	Original Content on Stackoverflow
Question	Nick Mehrdad Babaki	View Question on Stackoverflow
Solution 1 - Npm	Dipanker Shah	View Answer on Stackoverflow
Solution 2 - Npm	Scott Kuhl	View Answer on Stackoverflow
Solution 3 - Npm	Shashank Agrawal	View Answer on Stackoverflow
Solution 4 - Npm	Kévin Berthommier	View Answer on Stackoverflow
Solution 5 - Npm	Eureka	View Answer on Stackoverflow
Solution 6 - Npm	Akolade Adesanmi	View Answer on Stackoverflow
Solution 7 - Npm	dirq	View Answer on Stackoverflow
Solution 8 - Npm	Brett Zamir	View Answer on Stackoverflow
Solution 9 - Npm	Gebru Welay Gerezigiher	View Answer on Stackoverflow
Solution 10 - Npm	ggorlen	View Answer on Stackoverflow
Solution 11 - Npm	Sylvia	View Answer on Stackoverflow
Solution 12 - Npm	Samet ÇELİKBIÇAK	View Answer on Stackoverflow
Solution 13 - Npm	tno2007	View Answer on Stackoverflow
Solution 14 - Npm	Rahman Bokhari	View Answer on Stackoverflow
Solution 15 - Npm	Murilo Ângelo	View Answer on Stackoverflow
Solution 16 - Npm	U.A	View Answer on Stackoverflow
Solution 17 - Npm	Bartek	View Answer on Stackoverflow
Solution 18 - Npm	Michael Durrant	View Answer on Stackoverflow
Solution 19 - Npm	Mikki Ukraine	View Answer on Stackoverflow
Solution 20 - Npm	Sankeerna Reddy	View Answer on Stackoverflow
Solution 21 - Npm	Virendra	View Answer on Stackoverflow
Solution 22 - Npm	TriSTaR	View Answer on Stackoverflow