CODEWITHSUNDEEP
npmsassautoprefixerweb-compiler
Nick Mehrdad Babaki
Nick Mehrdad Babaki

Reputation: 12525

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

Upvotes: 284

Views: 530828

Answers (28)

mpen
mpen

Reputation: 282895

Make sure you don't have lockfiles from multiple package managers in your project dir. I had bun's lockfile along with yarn. yarn dlx update-browserslist-db@latest was updating the bun lockfile even though I used yarn dlx.

Upvotes: 0

Mohamed Imran
Mohamed Imran

Reputation: 179

Delete package.lock.json File then go to node_modules folder and delete caniuse-lite, browserslist Then run ng update @angular/cli and also run npm i caniuse-lite- browserslist

Upvotes: 1

Virendra
Virendra

Reputation: 851

This worked for me:

'npm -g update'

Upvotes: -4

brillout
brillout

Reputation: 7444

If you use pnpm, you can bump the caniuse-lite entries of the lock file by doing:

pnpm install autoprefixer@latest caniuse-lite@latest browserslist@latest

Then remove them from package.json#dependencies.

I'd assume it works with other package manager as well.

Upvotes: 3

Alexandros Andreou
Alexandros Andreou

Reputation: 7

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.

Upvotes: -2

Charles Zhao
Charles Zhao

Reputation: 186

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

Upvotes: 1

ProfDFrancis
ProfDFrancis

Reputation: 9411

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:

  1. 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!

  2. It is easy to understand exactly what it is doing, because it is explicit and very limited on what is to be updated.

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

  4. 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)

Upvotes: 51

Nick Manning
Nick Manning

Reputation: 2989

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

Upvotes: -1

Sayan Dey
Sayan Dey

Reputation: 472

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 [email protected]: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
npm WARN deprecated [email protected]: 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 [email protected]: 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

Upvotes: 2

Rahman Bokhari
Rahman Bokhari

Reputation: 123

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.

Upvotes: -2

ggorlen
ggorlen

Reputation: 56975

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

Upvotes: 17

Sankeerna Reddy
Sankeerna Reddy

Reputation: 199

The below steps worked for me

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

Upvotes: -4

K&#233;vin Berthommier
K&#233;vin Berthommier

Reputation: 1572

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.

Upvotes: 56

tno2007
tno2007

Reputation: 2158

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>

Upvotes: 0

Michael Durrant
Michael Durrant

Reputation: 96484

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

Upvotes: -2

Dipanker Shah
Dipanker Shah

Reputation: 3311

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

Upvotes: 234

TriSTaR
TriSTaR

Reputation: 403

If you use yarn:

yarn upgrade

Help for me

Upvotes: -5

Shashank Agrawal
Shashank Agrawal

Reputation: 25797

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:

enter image description here

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

Cheers!

Upvotes: 36

Akolade Adesanmi
Akolade Adesanmi

Reputation: 1250

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

Upvotes: 22

Bartek
Bartek

Reputation: 1280

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

  1. remove node_modules
  2. remove package-lock.json,
  3. run npm --depth 9999 update
  4. run npm install

Upvotes: -4

U.A
U.A

Reputation: 3373

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

Upvotes: -4

Gebru Welay Gerezigiher
Gebru Welay Gerezigiher

Reputation: 115

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.

Upvotes: 9

Scott Kuhl
Scott Kuhl

Reputation: 1081

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:

  1. Close Visual Studio
  2. Head to C:\Users\USERNAME\AppData\Local\Temp\WebCompilerX.X.X (X is the version of WebCompiler)
  3. 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

Upvotes: 65

Murilo &#194;ngelo
Murilo &#194;ngelo

Reputation: 17

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

Upvotes: -1

Samet &#199;ELÄ°KBI&#199;AK
Samet &#199;ELÄ°KBI&#199;AK

Reputation: 1073

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

...

}

Upvotes: 2

dirq
dirq

Reputation: 978

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

Upvotes: 16

Brett Zamir
Brett Zamir

Reputation: 14345

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

Upvotes: 13

Sylvia
Sylvia

Reputation: 1022

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:

  1. Right click on project file and select "Unload Project"
  2. Edit the .csproj file
  3. 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>
  1. Reload the project back into the solution.

Upvotes: 3

Related Questions