Question

我已经更新我的项目以使用node和yarn的最新版本，此升级之后，我的react项目不再希望与“ browserslist”一起使用。

我运行“纱线启动”并出现此错误：

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

我有以下版本：

节点v10.15.3
npm 6.9.0
纱线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中。我尝试使用其他解决方案，但没有一个起作用。

Answer 1

TL; DR rm yarn.lock; yarn

漫长的散文：

browserslist和postcss-preset-env都可能是第二级（深层）依赖项。这在create-react-app中很常见。但是，yarn upgrade不会升级锁定的子依赖关系，并且执行此操作的命令违反了纱线的原理。

可以说，这些库之一应该限制所需的依赖版本，并将其留给yarn来解析良好的版本。如果是这种情况，那么yarn是正确的。

可以通过使项目的某些{browserslist, caniuse-lite, postcss-preset-env}直接[dev]依赖关系来解决此问题。

或更短的rm yarn.lock; yarn✨

参考文献：

Answer 2

我看了一下代码，这是因为caniuse的更新支持对Kai OS的查询（我猜是印度的一些移动OS。）因此，如果您今天添加postcss-preset-env并拥有{ {1}}作为以前安装的某些软件包的依赖项，您可能会遇到错误

tl;博士删除node_modules并锁定，然后再次安装所有依赖项

Answer 3

我遇到了同样的问题，通过将caniuse-lite中package.json的版本修复为以前的版本，可以解决该问题。

附加到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==
...

Answer 4

我今天也遇到了这个错误。似乎该问题与postcss-preset-env有关。从postcss插件列表中删除它可以解决我的问题。

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

Answer 5

对于那些升级到Create React App 3的用户，此错误是由于MATCH(1*MID(CELL("filename",A1),FIND("]",CELL("filename",A1))+1,255), Sheet2!A1:A13,0)和MATCH(VALUE(MID(CELL("filename",A1),FIND("]",CELL("filename",A1))+1,255)), Sheet2!A1:A13,0)一起运行不兼容引起的。

运行browserslist@<4.5.5来查看旧版本caniuselite@>1.0.30000957的安装位置，并升级那些依赖于npm ls browserslist的软件包

纱线用户可以通过遵循提供的一些现有答案来解决此问题。

我是NPM用户，通过安装browserslist作为根依赖项来解决此问题，因此可传递的browserslist依赖项已被重复删除到根。

BrowserslistError：未知的浏览器kaios

5 个答案: