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

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.

Solution 1:^[1]

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 2:^[2]

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

Solution 3:^[3]

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:^[4]

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:^[5]

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:^[6]

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:^[7]

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:^[8]

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

Solution 9:^[9]

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:^[10]

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:^[11]

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:^[12]

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:^[13]

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:^[14]

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:^[15]

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:^[16]

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

Solution 17:^[17]

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:^[18]

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:^[19]

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

Solution 20:^[20]

The below steps worked for me

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

Solution 21:^[21]

To fix the issue you can type below command:

'npm -g update'

Solution 22:^[22]

If you use yarn:

yarn upgrade

Help for me

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Shashank Agrawal
Solution 2	Dipanker Shah
Solution 3
Solution 4	Kévin Berthommier
Solution 5
Solution 6
Solution 7	dirq
Solution 8	Brett Zamir
Solution 9	Shashank Agrawal
Solution 10
Solution 11	Sylvia
Solution 12	Samet ÇEL?KBIÇAK
Solution 13
Solution 14	Rahman Bokhari
Solution 15
Solution 16	U.A
Solution 17	Bartek
Solution 18	Michael Durrant
Solution 19	Mikki Ukraine
Solution 20	Sankeerna Reddy
Solution 21	Virendra
Solution 22	TriSTaR

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

For Angular Developers

Solution 4:[4]

Solution 5:[5]

Simple, safe solution

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]

Solution 15:[15]

Solution 16:[16]

Solution 17:[17]

Solution 18:[18]