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 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     gt  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

User · Accepted Answer

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

User · Answer

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  lt  Project gt  end tag and before the build web compiler package was imported         lt ItemGroup gt           lt PackageReference Include  MSBuildTasks  Version  1 5 0 235  gt               lt PrivateAssets gt all lt  PrivateAssets gt               lt IncludeAssets gt runtime  build  native  contentfiles  analyzers lt  IncludeAssets gt           lt  PackageReference gt       lt  ItemGroup gt       lt PropertyGroup gt           lt TempFolder gt    System IO Path   GetTempPath    lt  TempFolder gt       lt  PropertyGroup gt       lt ItemGroup gt           lt BrowsersListNodeJsFiles Include    TempFolder  WebCompiler  node modules browserslist node js    gt       lt  ItemGroup gt       lt Target Name  BrowsersListWarningsAsInfo  BeforeTargets  WebCompile  gt           lt FileUpdate Files    BrowsersListNodeJsFiles                       Regex  console warn                      ReplacementText  console log    gt       lt  Target gt      Reload the project back into the solution

User · Answer

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

User · Answer

In my case this works fine     sudo npm i -g browserslist caniuse-lite

User · Answer

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

User · Answer

To fix the issue you can type below command       npm -g update

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

If you use yarn  yarn upgrade  Help for me

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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  lt package-name gt

User · Answer

Deleting node modules and package-lock json and npm i solve the issue for me

User · Answer

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

User · Answer

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

User · Answer

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 caniuse-lite browserslist   This is good because   There is no deletion of package-lock json  Deleting that leaves you vulnerable to many packages getting upgraded with breaking changes   It is explicit and very limited on which things are 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

User · Answer

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

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

Examples related to npm

Examples related to sass

Examples related to autoprefixer

Examples related to web-compiler