浏览器列表错误：未知的浏览器kaios。

Question

浏览器列表错误：未知的浏览器kaios。

21

我已经将我的项目更新为使用最新版本的node和yarn，升级后现在我的React项目无法与"browserslist"一起工作。我运行"yarn start"命令时会出现以下错误：

./src/assets/css/material-dashboard-react.css?v=1.2.0 (./node_modules/css-loader??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/assets/css/material-dashboard-react.css?v=1.2.0)
BrowserslistError: Unknown browser kaios
    at Array.reduce (<anonymous>)
    at Array.some (<anonymous>)
    at Array.filter (<anonymous>)
    at new Promise (<anonymous>)

我有以下版本:

node v10.15.3
npm 6.9.0
yarn v1.15.2

我的 package.json 如下：

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "3.9.3",
    "@material-ui/icons": "3.0.2",
    "axios": "0.18.0",
    "classnames": "2.2.6",
    "html2canvas": "^1.0.0-alpha.12",
    "immutable": "3.8.2",
    "jspdf": "^1.4.1",
    "jspdf-autotable": "^2.3.5",
    "moment": "2.22.2",
    "npm-run-all": "4.1.5",
    "perfect-scrollbar": "1.4.0",
    "plotly.js": "1.47.1",
    "react": "^16.6.3",
    "react-currency-format": "1.0.0",
    "react-dates": "18.2.2",
    "react-dom": "^16.6.3",
    "react-excel-workbook": "0.0.4",
    "react-google-maps": "9.4.5",
    "react-plotly.js": "2.3.0",
    "react-redux": "6.0.0",
    "react-router": "4.3.1",
    "react-router-dom": "4.3.1",
    "react-scripts": "2.1.8",
    "react-select": "2.1.2",
    "react-swipeable-views": "0.13.1",
    "redux": "4.0.1",
    "redux-immutable": "4.0.0",
    "redux-persist": "5.10.0",
    "redux-thunk": "2.3.0",
    "weather-icons": "^1.3.2"
  },
  "scripts": {
    "start": "react-scripts --max-old-space-size=8192 start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [
    ">1%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

对我来说，问题与css-loader有关，我尝试解决该问题并将css-loader@2.1.1添加到package.json中。我尝试了其他解决方案，但都没有起作用。

对我而言，问题与 css-loader 有关，我尝试解决这个问题，并在 package.json 中添加了 css-loader@2.1.1 。我也尝试了其他的解决方案，但都无法解决该问题。

- bomba1990

1

https://github.com/browserslist/browserslist/issues/365 - Dima Tisnek

5个回答

5

我曾面临同样的问题，通过将package.json中的caniuse-lite版本修复为倒数第二个版本，我成功地解决了这个问题。

在package.json中追加：

  "resolutions": {
    "caniuse-lite": "1.0.30000957"
  },

运行$ yarn

并检查yarn.lock是否使用期望的版本:

...
caniuse-lite@1.0.30000957, caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000939, caniuse-lite@^1.0.30000955, caniuse-lite@^1.0.30000957:
  version "1.0.30000957"
  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000957.tgz#fb1026bf184d7d62c685205358c3b24b9e29f7b3"
  integrity sha512-8wxNrjAzyiHcLXN/iunskqQnJquQQ6VX8JHfW5kLgAPRSiSuKZiNfmIkP5j7jgyXqAQBSoXyJxfnbCFS0ThSiQ==
...

- Brian J Cardiff

1

这很好。它比被接受的答案更简单、更精确。 - Karl Horky

4

我查看了代码，发现是由于更新了 caniuse ，可以支持查询 Kai OS（印度的某些移动操作系统？）。因此，如果今天添加 postcss-preset-env ，并且之前已安装了一些依赖项中的 caniuse-lite ，则可能会遇到错误。

简而言之，请删除 node_modules 和 lock 文件，然后重新安装所有依赖项。

- Austaras

尽管KaiOS不是总部位于印度，但它是印度第二受欢迎的操作系统（根据维基百科：https://en.wikipedia.org/wiki/KaiOS）。 - Edric

1

今天我也遇到了这个错误。看起来问题与postcss-preset-env有关。将其从postcss插件列表中删除解决了我的问题。

我决定使用autoprofixer和postcss-custom-properties，而不是postcss-preset-env。

- ElForastero

请提供更多细节或示例配置。 - Dima Tisnek

实际上，选择的答案是可以的。只需删除yarn.lock文件即可。在我的情况下，我遇到了这个错误，因为当这个错误发生时，我刚好安装了postcss-preset-env。我以前从未使用过它。 - ElForastero

1

如果您正在升级到Create React App 3，那么这个错误是由于和caniuselite@>1.0.30000957不兼容导致的。运行npm ls browserslist查看安装了旧版本的的位置，并升级那些依赖于的包。Yarn用户可以通过遵循提供的一些现有答案来解决此问题。我是一个NPM用户，通过将browserslist@^4.5.5作为根依赖项安装，从而使传递的依赖项重复到根目录。

- Dale Smith

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dima Tisnek · Accepted Answer

TL;DR rm yarn.lock; yarn

简而言之，运行 rm yarn.lock; yarn 命令可以解决可能存在的依赖版本问题。

长篇大论：

browserslist 和 postcss-preset-env 可能是二级（深度）依赖关系。这在 create-react-app 中很常见。但是，yarn upgrade 不会升级锁定的子依赖项，并且针对此类问题创建命令与 yarn 的哲学不符。

可以认为，其中一个库应该限制所需的依赖项版本，并留给 yarn 解析好的版本。如果是这种情况，那么yarn 是正确的。

可以通过将 {browserslist、caniuse-lite、postcss-preset-env} 中的一些直接[dev]依赖于您的项目来解决此问题。

或者，更简短的方法是 rm yarn.lock; yarn ✨

参考资料: