Browserslist: caniuse-lite is outdated. Please run

2020-02-08 09:45发布

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.

12条回答
做自己的国王
2楼-- · 2020-02-08 10:12

I'm not exactly sure where my problem was, but I believe it was because I was using 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>
查看更多
兄弟一词,经得起流年.
3楼-- · 2020-02-08 10:16

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

...

}
查看更多
甜甜的少女心
4楼-- · 2020-02-08 10:19

For Angular Developers

Although, I'm answering this very late but I have a bad habit of checking changelogs of every library I use

查看更多
家丑人穷心不美
5楼-- · 2020-02-08 10:19

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

查看更多
欢心
6楼-- · 2020-02-08 10:19

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.
查看更多
不美不萌又怎样
7楼-- · 2020-02-08 10:21

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

查看更多
登录 后发表回答