【问题标题】：Browserslist: caniuse-lite is outdated. Please run next command `npm update caniuse-lite browserslist`Browserslist：caniuse-lite 已过时。请运行下一个命令`npm update caniuse-lite browserslist`
【发布时间】：2019-08-11 19:09:38
【问题描述】：

最近，当我编译我的 scss 文件时，我得到一个错误。错误消息说：

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

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

如果我删除

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

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

【问题讨论】：

标签： npm sass autoprefixer web-compiler

【解决方案1】：

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

【讨论】：

对于上下文：我的 IDE 是 VS Code，当我开始看到此错误时，我的 JS 项目仅包含 Parcel、react 和 react-dom。以上选项均无效。这个解决方案修复了我的问题。
在 Windows 上失败 ``` C:\projects\ember-cli-typescript-blueprints>npx browserslist@latest --update-db npm ERR！ cb.apply 不是函数 npm ERR！可以在以下位置找到此运行的完整日志：npm ERR！ c:\npm\cache_logs\2020-11-15T14_19_08_958Z-debug.log 安装 ['browserslist@latest'] 失败，代码 1 ```
什么是npx？它与npm 有何不同？
@Marquizzo npx 是一种直接执行 npm 包的方法，无需将其保存在系统中。
关于--update-db 的一些信息：使用浏览器更新 caniuse-lite 数据库。对于所有数据，最后 2 个版本或 >1% 将返回旧浏览器，Autoprefixer/Babel 将为浏览器插入 polyfill，如今没有人真正使用。另一种选择是运行 npm update，但它会更新您的所有依赖项，这将迫使您运行完整的 QA 流程。

【解决方案2】：

听起来您正在使用 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

【讨论】：

我做到了，我没有那个错误了，但是我得到了一个新的错误：插件错误：找不到模块'autoprefixer'。我尝试重新安装和更新 autoprefixer，但仍然收到该错误。
听起来是个不同的问题。如果您有在线项目的链接，或者可以将另一个有问题的项目放在一起，我很乐意查看。
似乎当我试图通过升级和重新安装 autoprefixer 来解决问题时，我破坏了一些东西。幸运的是，今天 Web Compiler 更新了自己，我再次看到了该错误消息。我按照上述步骤操作，这次问题已解决。
知道这个目录在 mac 上的什么位置吗？

【解决方案3】：

对于 Angular 开发人员

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

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

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

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

干杯！

【讨论】：

【解决方案4】：

简单、安全的解决方案

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

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

这很好，因为：

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

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

【讨论】：

目前 --depth 已被弃用，不会影响更新的工作方式。请参阅已实施的RFC0019。在某些情况下，例如本地 node_modules 文件夹，也可能需要添加 --save 。否则 - 好的答案，我喜欢这种方式超过删除文件夹（这可能成为这样做的坏方法）。

【解决方案5】：

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

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

更新：

以防万一，上述解决方案没有解决它。您可以运行 npm update，因为这会升级已弃用/过时的软件包。

注意：

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

【讨论】：

我的 /TEMP 文件夹中没有 /WebCompiler 文件夹，就像这里建议的其他一些帖子一样，所以我运行了这个命令行，它似乎已经解决了这个问题。

【解决方案6】：

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

我正在使用 Yarn，我能够通过仅删除 yarn.lock 中的 caniuse-db 和 caniuse-lite 条目并执行 yarn 来解决此问题。

不需要通过删除来破坏锁文件的主要功能。

【讨论】：

相同。我在yarn.lock 中没有caniuse-db，但我有两个caniuse-lite 条目。删除了他们两个，然后再次yarn installed。像魅力一样工作。
如果所有其他方法都失败了，这是唯一的方法。我被困了几个小时，谢谢你

【解决方案7】：

answer above 的延续。

与@MehrdadBaki 有相同的“插件错误”。我卸载了web编译器，删除了上面提到的AppData WebCompiler文件夹，然后重新打开VS2019，重新安装了web编译器。

然后我又去了 WebCompiler 文件夹并做了npm i autoprefixer@latest npm i caniuse-lite@latest 和 npm i caniuse-lite browserslist@latest

【讨论】：

只需更新 autoprefixer、caniuse-lite、browserslist 对我有好处

【解决方案8】：

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

【讨论】：

即使npm --depth 99 update caniuse-lite browserslist 在我的项目中导致JavaScript heap out of memory，但npm --depth 20 update caniuse-lite browserslist 运行速度很快并解决了我的错误。
--depth 标志已弃用 - reference
@AlexandrNil 谢谢兄弟，它为我解决了这个问题！
我收到了一个未知版本的 op_mob 62。想知道这是否是问题的一部分。

【解决方案9】：

就我而言，我从node_modules 中删除了caniuse-lite、browserslist 文件夹。

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

npm i -g browserslist caniuse-lite --save

工作正常。

【讨论】：

我们必须添加npm i browserslist caniuse-lite --save

【解决方案10】：

有一个环境变量>= 4.5.4，BROWSERSLIST_IGNORE_OLD_DATA，你可以设置truthy来抑制警告（BROWSERSLIST_IGNORE_OLD_DATA=true）。见提交Add BROWSERSLIST_IGNORE_OLD_DATA environment variable。

这是来自该提交的相关代码的 sn-p，显示了在检查此环境变量时的早期救助：

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

【讨论】：

【解决方案11】：

正如 Scott Kuhl 的回答中提到的，这个问题在 https://github.com/madskristensen/WebCompiler/issues/413

对我来说，运行命令 npm i caniuse-lite- browserslist 一天只工作了大约 1/2 天，然后它再次成为问题。

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

您可以手动更新此文件，位于 C:\Users\[用户名]\AppData\Local\Temp\WebCompiler[VersionNumber]\node_modules\browserslist

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

右键单击项目文件并选择“卸载项目”
编辑 .csproj 文件
将以下内容粘贴到项目文件中。我将它粘贴到文件末尾，在 </Project> 结束标记之前和导入构建 Web 编译器包之前。

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

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

【讨论】：

谢谢！这对我来说是最好的解决办法。上述修复每隔一天就会过时！

【解决方案12】：

删除 node_modules 和 package-lock.json 和 npm i 为我解决问题。

【讨论】：

删除 package-lock.json 可能会导致一些破坏性更改错误，如果您有很长的软件包安装历史，例如，一个项目已经工作和开发了一年多，并且软件包具有许多 3 级依赖项可能会造成重大变化

【解决方案13】：

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

npm i autoprefixer@latest

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

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

...

}

【讨论】：

【解决方案14】：

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

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

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

对于 npm：

npm ls -g --depth=0

纱线：

yarn global list

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

npm uninstall -g <package-name>

【讨论】：

【解决方案15】：

对我有用的是首先像这样构建项目

npm 运行构建

然后像这样运行它

npm 运行开始

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

【讨论】：

【解决方案16】：

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

编辑

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

【讨论】：

欢迎来到 SO！当你发布答案时，即使它是正确的，也要试着解释一下。
这不是一个糟糕的答案......只需稍微编辑一下就完成了。

【解决方案17】：

我已经一步一步解决了这个问题：

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

【讨论】：

小心删除package-lock.json，因为它可能会引入重大更改，应该避免。

【解决方案18】：

适用于我当前项目的最小解决方案

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

删除项目中的node_modules/browserslist目录

现在

npm run build

不再生成该消息

【讨论】：

如果你刚刚删除了目录，下次npm install/npm ci会发生什么？
实际上我遇到了 css perfix 的问题，最后我为该项目更新了 create-create-app，一切都很好。

【解决方案19】：

以下步骤对我有用

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

【讨论】：

【解决方案20】：

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

'npm -g 更新'

【讨论】：

【解决方案21】：

如果你使用纱线：

yarn upgrade

帮帮我

【讨论】：