浏览器列表：caniuse-lite 已过时。请运行下一个命令 `npm update caniuse-lite browserslist`

Question

最近，当我编译 scss 文件时出现错误。错误消息说：

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

首先，正如消息所说，我运行 npm update caniuse-lite browserslist 但它没有解决问题。我删除了整个 nod-modules 目录并重新安装，我还通过 npm update 更新了整个文件夹，但是 none 解决了这个问题。我还重新安装了 autoprefixer 和 browserslist，但其中 none 解决了问题。

如果我删除

"options": {
      "autoPrefix": "> 1%"
    }

从我的 compilerconfig.json 来看，一切正常，这意味着它可能与 autoprefixer 有关。另外，我手动将软件包版本更改为 package.json 上的最新版本并重新安装，但没有成功。

Answer 1

听起来您正在使用 Visual Studio 的 Web 编译器扩展。这里有一个未解决的问题：https://github.com/madskristensen/WebCompiler/issues/413

该问题中发布了解决方法：

关闭Visual Studio
前往 C:\Users\USERNAME\AppData\Local\Temp\WebCompilerX.X.X（X 是 WebCompiler 的版本）
从 node_modules 文件夹中删除以下文件夹：caniuse-lite 和 browserslist 打开 CMD（在 C:\Users\USERNAME\AppData\Local\Temp\WebCompilerX.X.X 内）和运行：npm i caniuse-lite browserslist

Answer 2

如 Scott Kuhl 的回答中所述，此问题在 https://github.com/madskristensen/WebCompiler/issues/413

对我来说，运行命令 npm i caniuse-lite- browserslist 只工作了大约 1/2 天就再次出现问题。

post 中提到的以下解决方案效果更好。这会更新 node.js 文件，以便它在返回这些错误时使用 console.log 而不是 console.warn。

您可以手动更新位于 C:\Users\[用户名]\AppData\Local\Temp\WebCompiler[版本号]\node_modules\browserslist

或者，为了自动完成，将以下内容添加到您的 .csproj 文件中：

右键单击项目文件并 select "Unload Project"
编辑 .csproj 文件
将以下内容粘贴到项目文件中。我将它粘贴到文件末尾，在 </Project> 结束标记之前和导入构建网络编译器包之前。

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

将项目重新加载回解决方案。

Answer 3

npm --depth 9999 update 为我解决了这个问题——显然是因为 package-lock.json 坚持使用过时的版本。

Answer 4

的延续。

与@MehrdadBabaki 有相同的 "plugin error"。我卸载了web编译器，删除了上面提到的AppData WebCompiler文件夹，然后重新打开VS2019，重新安装web编译器。

然后我再次进入 WebCompiler 文件夹并执行 npm i autoprefixer@latest npm i caniuse-lite@latest 和 npm i caniuse-lite browserslist@latest

Answer 5

我找到了一条捷径，而不是通过 vs code appData/webCompiler，我使用此命令 npm i caniuse-lite browserslist 将其添加为我的项目 的依赖项。但是你可以全局安装它以避免将它添加到每个项目。

安装后，您可以将其从项目中删除 package.json 并执行 npm i。

更新：

以防万一，以上解决方案未能解决问题。您可以运行 npm update，因为这会升级 deprecated/outdated 个包。

注：

运行 npm 更新后，可能缺少依赖项。跟踪错误并安装缺少的依赖项。我的是 nodemon，我通过 npm i nodemon -g
修复

Answer 6

我也有同样的问题这个命令对我有用

npm i autoprefixer@latest

它会自动在 package.json 和 package-lock.json 文件中添加需要依赖项，如下所示：

package.json

"autoprefixer": "^9.6.5",

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

...

}

Answer 7

我确实将节点版本从 12 降级到 10

编辑

这个错误发生在我身上，因为我使用的是节点版本 12。当我降级到版本 10.16.5 时，此错误停止。这个错误发生在我的本地环境中，但在生产和暂存中，它没有发生。在 prod 和 staging 节点版本是 10.x 所以我只是这样做并且我不需要更新我的 package.json

中的任何包

Answer 8

我不确定我的问题出在哪里，但我相信这是因为我使用了来自 npm 和 Yarn 的相同全局包。

我卸载了所有的 npm 全局包，然后再次使用 yarn 命令时，问题消失了。

要查看已安装的全局包...

对于 npm：

npm ls -g --depth=0

对于纱线：

yarn global list

然后我卸载了我在 npm 列表中看到的每个包，使用：

npm uninstall -g <package-name>

Answer 9

对于 Angular 开发人员

虽然，我很晚才回答这个问题。我有一个坏习惯，就是检查我使用的每个库的变更日志，并在检查 Angular CLI 的发行说明时，我发现他们昨天（2020 年 1 月 9 日）发布了一个新补丁，解决了这个问题。

https://github.com/angular/angular-cli/releases/tag/v8.3.22

因此，当您运行 ng update 时，您应该获得 @angular/cli 的更新：

并且运行ning ng update @angular/cli 将修复此警告。

干杯！

Answer 10

就我而言，我从 node_modules.

中删除了 caniuse-lite、browserslist 文件夹

然后我输入以下命令来安装软件包。

npm i -g browserslist caniuse-lite --save

工作正常。

Answer 11

要解决此问题，您可以键入以下命令：

'npm -g update'

Answer 12

删除 node_modules 和 package-lock.json 以及 npm i 解决了我的问题。

Answer 13

我已经通过以下步骤解决了这个问题：

删除 node_modules
删除 package-lock.json、
运行 npm --depth 9999 update
运行 npm install

Answer 14

如果你使用纱线：

yarn upgrade

帮帮我

Answer 15

试试这个它解决了我的问题npx browserslist@latest --update-db

Answer 16

对我当前项目有用的最小解决方案

一个create-react-app项目
Ubuntu / *nix
2020
节点 14.7

删除项目中的node_modules/browserslist目录

现在

npm run build

不再生成该消息

Answer 17

许多人建议您删除 package-lock.json 或 yarn.lock。这显然是个坏主意！

我正在使用 Yarn，我能够通过仅删除 yarn.lock 中的 caniuse-db 和 caniuse-lite 条目并执行 yarn 来纠正这个问题。 =16=]

没有必要通过删除来破坏锁文件的主要功能。

Answer 18

简单、安全的解决方案

@Alexandr Nil 的回答是安全的，并且对我有效。我正在写一个完整的答案，因为很容易错过他的评论。

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

这很好，因为：

没有删除package-lock.json。删除它会使您容易受到许多软件包升级的破坏性更改的影响，并且您比以前更头疼！
很容易准确地理解它在做什么，因为它是明确的并且对要更新的内容非常有限。
它避免了非常大的深度 99 或 9999，这将适用于某些项目和系统，但不适用于其他项目和系统。如果您将深度限制为太小的数字，它不会破坏任何东西。您可以增加深度再试一次，直到项目编译成功。我不知道我是否真的需要 20，或者可以用更小的深度来管理，例如 5 或 10。但是深度为 20 不到一分钟就达到了运行。
又快又简单！

感谢@Zbyszek 建议添加“--save”选项。是的，--depth 目前已被弃用，但我认为他们会用其他东西替换它而不是完全删除它，所以目前这似乎是破坏性最小的方法。

Answer 19

以下步骤对我有用

rm -rf node_modules/
yarn
yarn upgrade caniuse-lite browserlist
正在重启服务器并清除浏览器缓存。

Answer 20

有一个环境变量 >= 4.5.4，BROWSERSLIST_IGNORE_OLD_DATA，您可以设置 truthy 来抑制警告 (BROWSERSLIST_IGNORE_OLD_DATA=true)。请参阅提交 Add BROWSERSLIST_IGNORE_OLD_DATA 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 + '`'
    )
    // ...
  }
  // ...
}

Answer 21

对我有用的是首先像

一样构建项目

npm run build

然后运行喜欢

npm run start

这将消除错误并正常加载应用程序。

Answer 22

我降级节点版本，然后重新安装节点模块，问题消失了。在我的例子中，从 17.X 到 14.5.0

浏览器列表：caniuse-lite 已过时。请运行下一个命令 `npm update caniuse-lite browserslist`

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

sass

npm

autoprefixer

web-compiler

对于 Angular 开发人员

对我当前项目有用的最小解决方案

简单、安全的解决方案

浏览器列表：caniuse-lite 已过时。请 运行 下一个命令 `npm update caniuse-lite browserslist`

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

sass

npm

autoprefixer

web-compiler

对于 Angular 开发人员

对我当前项目有用的最小解决方案

简单、安全的解决方案

浏览器列表：caniuse-lite 已过时。请运行下一个命令 `npm update caniuse-lite browserslist`