BrowserslistError: Unknown browser kaios

Question

I have updated my project to use the last versions of node and yarn, after this upgrade now my react project doesn't want to work with "browserslist".

I run "yarn start" and get this error:

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

I have the following versions:

• node v10.15.3
• npm 6.9.0
• yarn v1.15.2

And my package.json its

{
  "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"
  ]
}

For me the issue it's related to css-loader, I try solving the issue and add [email protected] to the package.json. I try with other solution but no ones work.

Answer 1

TL;DR rm yarn.lock; yarn

The long prose:

Both browserslist and postcss-preset-env might be 2nd level (deep) dependencies. This is quite common with create-react-app. However, yarn upgrade does not upgrade locked sub-dependencies and a command to do that is against philosophy of yarn.

Arguably, one of these libraries should restrict required dependency version, and leave it to yarn to resolve good version. If that's the case, then yarn is correct.

It may be possible to resolve this by making some of {browserslist, caniuse-lite, postcss-preset-env} direct [dev] dependencies of your project.

Or, shorter, rm yarn.lock; yarn ✨

References:

• https://github.com/yarnpkg/yarn/issues/4986
• https://github.com/browserslist/browserslist/issues/365
• https://github.com/postcss/autoprefixer/issues/1184

Answer 2

I was facing the same issue and by fixing the version of caniuse-lite in the package.json with the previous to the last version I was able to workaround the issue.

Append to the package.json

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

Run $ yarn

And check that the yarn.lock is using the expected version:

...
[email protected], 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==
...