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

Question

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 node_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.

score 200 · Answer 1 · answered Jul 31 '20 at 14:21

200

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

answered Jul 31 '20 at 14:21

Dipanker Shah

2,789
2
8
4

3

For context: My IDE is VS Code, and my JS project only included Parcel, react, and react-dom when I began seeing this error. None of the above options worked. This solution fixed mine. – Klay Aug 11 '20 at 14:31
Fails on Windows ``` C:\projects\ember-cli-typescript-blueprints>npx browserslist@latest --update-db npm ERR! cb.apply is not a function npm ERR! A complete log of this run can be found in: npm ERR! c:\npm\cache\_logs\2020-11-15T14_19_08_958Z-debug.log Install for [ 'browserslist@latest' ] failed with code 1 ``` – bryan.crotaz Nov 15 '20 at 14:19
6

What is `npx`? How is it different than `npm`? – M - Jan 15 '21 at 09:19
7

@Marquizzo `npx` is a way to directly execute npm package, without saving it on your system. – Ahmed Kamal Jan 17 '21 at 13:58
The source of explanation is in the Browsers Data Updating section on browserlist npm homepage: https://www.npmjs.com/package/browserslist – Pierre Cordier Feb 18 '21 at 14:33
4

Some info on what ```--update-db ``` does: Updates the caniuse-lite database with browsers. With all data last 2 versions or >1% will return old browsers and Autoprefixer/Babel will insert polyfills for browsers, which nobody really uses nowadays. Another option will be to run npm update, but it will update all your dependencies, which will force you to run the full QA process. – AnandShiva May 11 '21 at 20:48
Awesome bhai. I was facing 2 other issues but you solved all of then in one go. :-) However there is only a small difference of `@latest` but your answer has solved this problem also: https://stackoverflow.com/questions/58155525/browserslisterror-unknown-version-67-of-android – Tanzeel Jun 07 '21 at 18:33
I ran this command which is recommended by nx. Now all of my npm scripts are exiting with `Unknown version 62 of op_mob`. Has anyone gotten this error back? – Winnemucca Dec 06 '21 at 23:56
Note that this is not just for NPM! This command works with Yarn as well. Pulling from their readme: `updates caniuse-lite version in your npm, yarn or pnpm lock file.` – James Irwin Jan 16 '22 at 07:41
1

Where do I run this command, when I just run it in the root it says that package.json cannot be found. – Anton Lipovskoy Jan 20 '22 at 09:10

score 63 · Accepted Answer · edited Jan 11 '20 at 09:31

63

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

edited Jan 11 '20 at 09:31

Shashank Agrawal

25,161
11
89
121

answered Mar 21 '19 at 14:50

Scott Kuhl

1,021
11
11

2

I did it and I don't have that error anymore but I got a new error: Plugin Error: Cannot find module 'autoprefixer'. I tried to reinstall and updating autoprefixer but I still get that error. – Nick Mehrdad Babaki Mar 21 '19 at 22:26
Sounds like a different issue. If you have a link to your project online or can put together another project that has the problem, I would be happy to look at it. – Scott Kuhl Mar 22 '19 at 23:31
It seems when I was trying to fix the issue by upgrading and reinstalling autoprefixer I had broken something. Luckily, today Web Compiler updated itself and I saw that error message again. I followed the steps above and this time the issue fixed. – Nick Mehrdad Babaki Mar 28 '19 at 05:49
3

Any idea where this directory is on the mac? – Safa Alai Nov 12 '20 at 02:15
If I follow these directions, I get `added 2 packages, removed 677 packages, and changed 3 packages in 14s` and then WebCompiler fails entirely with `"C:\Users\[Me]\AppData\Local\Temp\WebCompiler1.14.11\node_modules\.bin\sass.cmd"' is not recognized as an internal or external command, operable program or batch file.` I have to delete the whole "WebCompiler1.14.11" folder and restart Visual Studio to get everything back. – HFloyd Jul 19 '23 at 15:03

ProfDFrancis · Answer 3 · 2023-02-24T19:10:36.327

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.

Thank you to @pipedreambomb for pointing out that it might seem to just hang. If that happens, try running it with smaller numbers and working upwards:

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

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

(etc)

Currently --depth is deprecated and simply does not affect how the update works. See implemented [RFC0019](https://github.com/npm/rfcs/blob/latest/implemented/0019-remove-update-depth-option.md). Also might need to add --save in some circumstances like local node_modules folder. Otherwise - good answer, I like this way more than deleting folders (which may become a bad way to do that). — Zbyszek, May 25 '21 at 14:35
Perhaps this is out of date, as it just seems to lock my terminal. I've waited 5 minutes and it hasn't even output anything. — pipedreambomb, Feb 23 '23 at 14:08
Just tried running it now, and it works fine. Perhaps try with a very small `--depth` and work upwards? — ProfDFrancis, Feb 24 '23 at 19:11

score 45 · Answer 4 · answered Nov 16 '20 at 11:02

45

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.

answered Nov 16 '20 at 11:02

Kévin Berthommier

1,402
15
15

3

Same. I did not have `caniuse-db` in `yarn.lock`, but I had two entries for `caniuse-lite`. Removed both of them and then `yarn install`ed again. Worked like a charm. – Michael Johansen Jun 13 '21 at 20:31
1

This is the only way if all other methods failed. I was stuck in this for hours, thank you for this – AACaN Nov 10 '21 at 04:44
I also had to remove `browserslist` form `yarn.lock`. – SePeF May 05 '22 at 13:14
Since it was a fresh project, deleting `yarn.lock `wasn't an issue. – Frizzant Dec 09 '22 at 11:52

Shashank Agrawal · Answer 5 · 2020-06-03T14:55:07.900

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!

Akolade Adesanmi · Answer 6 · 2020-05-23T15:30:28.677

23

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

edited May 23 '20 at 15:30

answered May 30 '19 at 15:11

Akolade Adesanmi

1,152
11
15

5

I didn't have the /WebCompiler folder in my /TEMP folder like some other posts here suggested, so I ran this command line and it seems to have fixed the issue. – AppDreamer Jun 26 '19 at 20:15

score 16 · Answer 7 · answered Apr 26 '19 at 19:52

16

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

answered Apr 26 '19 at 19:52

dirq

968
2
11
26

just update autoprefixer, caniuse-lite, browserslist is good for me – cwhsu Jul 28 '19 at 05:26

score 14 · Answer 8 · answered Mar 25 '21 at 18:14

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 + '`'
    )
    // ...
  }
  // ...
}

score 12 · Answer 9 · answered Apr 18 '19 at 02:01

12

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

answered Apr 18 '19 at 02:01

Brett Zamir

14,034
6
54
77

15

Even `npm --depth 99 update caniuse-lite browserslist` caused `JavaScript heap out of memory` in my project, but `npm --depth 20 update caniuse-lite browserslist` run fast and solved the error in my case. – Nil Jun 14 '19 at 08:33
2

`--depth` flag is deprecated - [reference](https://github.com/npm/rfcs/blob/latest/implemented/0019-remove-update-depth-option.md) – Alex Ljamin Mar 12 '21 at 04:37
@AlexandrNil Thank you bro it solved the issue for me! – tonix Mar 12 '21 at 07:18
I am getting a unknown version 62 of op_mob. Wondering if this is part of the issue. – Winnemucca Dec 03 '21 at 18:05

score 10 · Answer 10 · edited Jan 20 '20 at 04:22

10

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.

edited Jan 20 '20 at 04:22

Shashank Agrawal

25,161
11
89
121

answered Jan 17 '20 at 04:37

Gebru Welay Gerezigiher

109
1
2

3

We had to add `npm i browserslist caniuse-lite --save` – sneaky Jun 19 '20 at 07:26

score 3 · Answer 11 · answered Mar 27 '19 at 12:51

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.

Thank you! This was the best fix for me. The above fixes would get outdated every other day! — Bradly Bennison, Jan 06 '20 at 19:31

score 2 · Answer 12 · answered Oct 23 '19 at 13:23

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"
    },

...

}

score 2 · Answer 13 · answered Jul 06 '22 at 11:59

My Issue solved by doing this in my react native project

npx browserslist@latest --update-db

console ->

Latest version:     1.0.30001363
Installed version:  1.0.30001296
Removing old caniuse-lite from lock file
Installing new caniuse-lite version
$ npm install caniuse-lite
npm WARN deprecated sane@4.1.0: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated uglify-es@3.3.9: support for ECMAScript is superseded by `uglify-js` as of v3.13.0
Cleaning package.json dependencies from caniuse-lite
$ npm uninstall caniuse-lite
caniuse-lite has been successfully updated

Target browser changes:
- and_chr 96
+ and_chr 103
- and_ff 95
+ and_ff 101
- android 96
+ android 103
- chrome 96
- chrome 95
- chrome 94
+ chrome 103
+ chrome 102
+ chrome 101
- edge 96
- edge 95
+ edge 103
+ edge 102
- firefox 95
- firefox 94
+ firefox 102
+ firefox 101
- ios_saf 15.2
- ios_saf 15.0-15.1
+ ios_saf 15.5
+ ios_saf 15.4
+ ios_saf 15.2-15.3
- opera 82
- opera 81
+ opera 87
+ opera 86
+ opera 85
- safari 15.2
- safari 15.1
- safari 13.1
+ safari 15.5
+ safari 15.4
- samsung 15.0
- samsung 14.0
+ samsung 17.0
+ samsung 16.0

Worked flawlessly for me with webpack & bud.js v6.7.0 to get a clean console again. — Frizzant, Jan 24 '23 at 10:53

tno2007 · Answer 14 · 2020-10-25T09:08:14.003

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>

score 1 · Answer 15 · answered May 06 '23 at 10:22

1

Well, in my case I have to manually execute pnpm up caniuse-lite.

answered May 06 '23 at 10:22

Charles Zhao

158
11

Murilo Ângelo · Answer 16 · 2019-10-24T13:03:07.160

0

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

edited Oct 24 '19 at 13:03

answered Oct 24 '19 at 02:44

Murilo Ângelo

19
1

2

Welcome to SO! When you post an answer, even if it is right, try to explain a little bit. – David García Bodego Oct 24 '19 at 03:10
It is not a bad answer... just edit it a little bit and done. – David García Bodego Oct 24 '19 at 13:04

score 0 · Answer 17 · answered Apr 17 '22 at 08:25

0

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

answered Apr 17 '22 at 08:25

Mikki Ukraine

175
8

score 0 · Answer 18 · answered Jan 19 '23 at 14:59

0

Deleting node_modules and reinstalling (npm i) worked for me. Did not delete package-lock.json.

answered Jan 19 '23 at 14:59

Nick Manning

2,828
1
29
50

score 0 · Answer 19 · answered Jun 21 '23 at 23:28

0

If you didn't change anything and you started getting Internal Server Error due to caniuse-lite is outdated, just:

Remove package-lock.json and node-modules
Run npm install

This issue will be solved.

answered Jun 21 '23 at 23:28

JohnPix

1,595
21
44

score 0 · Answer 20 · answered Aug 02 '23 at 13:53

0

For me it was just as simple as turning off my VPN. I was using ExpressVPN and onced I turned it off 'npm start' command was working fine without getting this error. Hope this helps.

answered Aug 02 '23 at 13:53

Alexandros Andreou

11
1
3

score -1 · Answer 21 · answered Aug 16 '20 at 13:26

-1

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

answered Aug 16 '20 at 13:26

Michael Durrant

93,410
97
333
497

If you just deleted the directory, what happens next time you `npm install`/`npm ci`? – jonrsharpe Aug 16 '20 at 15:29
actualy i then ran into an issue with css perfix, finally I updated create-create-app for that project and all was good. – Michael Durrant Aug 16 '20 at 17:12

score -1 · Answer 22 · answered Apr 19 '21 at 20:32

-1

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.

answered Apr 19 '21 at 20:32

Rahman Bokhari

125
1
7

score -2 · Answer 23 · answered May 01 '20 at 10:57

-2

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

answered May 01 '20 at 10:57

U.A

2,991
3
24
36

7

deleting package-lock.json could result to some breaking changes error if you have a long history of package installation, for example a project that was working and developed for more than a year and have packages that has a lot of 3rd level dependency could make breaking changes – kafinsalim Aug 19 '20 at 22:43

score -2 · Answer 24 · answered May 18 '20 at 11:15

-2

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

answered May 18 '20 at 11:15

Bartek

810
7
9

2

Be careful with removing `package-lock.json` as it could introduce breaking changes and should be avoided. – Liam Dec 14 '20 at 01:08

score -3 · Answer 25 · answered Jan 17 '20 at 07:39

-3

To fix the issue you can type below command:

'npm -g update'

answered Jan 17 '20 at 07:39

Virendra

665
5
6

score -3 · Answer 26 · answered Mar 15 '21 at 22:52

-3

The below steps worked for me

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

answered Mar 15 '21 at 22:52

Sankeerna Reddy

161
2
8

score -4 · Answer 27 · answered Jun 22 '20 at 05:24

-4

If you use yarn:

yarn upgrade

Help for me

answered Jun 22 '20 at 05:24

TriSTaR

405
3
19