How do I fix 'Browserslist: caniuse-lite is outdated' for my Vue build?

Question

When doing a vue-cli build through npm I get this error:

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

This was working until recently and I'm not sure what would cause this to start failing. Seems like some timeframe hit that made it start reporting as 'outdated' but I don't know what to update to fix it.

I have tried running the suggested command but it doesn't do the trick. I am doing this through npm and am not using Visual Studio, so I am not using WebCompiler (and that directory doesn't exist in my user folder) so the solution in Browserslist: caniuse-lite is outdated. Please run next command `npm update caniuse-lite browserslist` doesn't apply.

This also happens on our build system running through VSO, so it isn't just my box.

Here is my package.json file:

{
  "name": "productName.portal",
  "version": "1.0.0",
  "description": "productName.portal static content",
  "main": "gulpfile.js",
  "keywords": [
    "gulp",
    "task"
  ],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/preset-react": "^7.0.0",
    "@types/jest": "^23.1.4",
    "@types/jquery": "^3.3.4",
    "@types/underscore": "^1.8.8",
    "@voerro/vue-tagsinput": "^1.8.0",
    "@vue/cli-plugin-babel": "^3.0.0-rc.4",
    "@vue/cli-plugin-typescript": "^3.0.0-rc.4",
    "@vue/cli-plugin-unit-jest": "^3.0.1",
    "@vue/cli-service": "3.0.0-rc.4",
    "@vue/test-utils": "^1.0.0-beta.20",
    "axios": "^0.18.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-polyfill": "^6.26.0",
    "copy-webpack-plugin": "^4.5.2",
    "gulp": "^3.9.0",
    "gulp-clean-css": "latest",
    "gulp-concat": "latest",
    "gulp-sourcemaps": "latest",
    "gulp-uglify": "latest",
    "jquery": "^3.3.1",
    "moment": "^2.22.2",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.1",
    "script-loader": "^0.7.2",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "ts-jest": "^23.0.0",
    "underscore": "^1.9.1",
    "vue-i18n": "^8.0.0",
    "vue-js-modal": "^1.3.16",
    "vue-loading-overlay": "^2.1.0",
    "vue-simple-spinner": "^1.2.8",
    "vue-template-compiler": "^2.5.16",
    "vue-toasted": "^1.1.24",
    "vuejs-datepicker": "^1.5.2"
  },
  "dependencies": {
    "node": "^9.9.0",
    "typescript": "^3.0.1",
    "trie-search": "^1.2.8",
    "vue": "^2.5.16",
    "vue-class-component": "^6.0.0",
    "vue-property-decorator": "^7.0.0",
    "vuex": "^3.0.1"
  },
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "unittest": "vue-cli-service test:unit"
  }
}

I ended up removing my node_modules folder and the package-lock.json file and doing an npm install then an npm update for good measure, but for some reason the browserlist module is now not being put into the node_modules folder. I did an explicit ```npm update caniuse-lite browserslist``` which forced the latest version of these node modules to install and that actually seems to have done the trick. I tried this on a fresh working copy and it seems like a viable solution. I think the problem stems form another packages reference somehow, but by explicitly installing them, it fixed it. — Jeremy, Mar 29 '19 at 00:13
@Phil had a better solution - the above comment is a workaround if you can't find the culprit, but the answer below actually seems to be the solution to my problem! — Jeremy, Mar 29 '19 at 00:21

Phil · Answer 1 · 2019-03-29T00:17:34.860

14

This is all down to the dependencies of @babel/preset-env

├─┬ @babel/preset-env
│ ├─┬ browserslist
│ │ ├── caniuse-lite

You can rectify this by updating that package

npm update @babel/preset-env

Just realised that Vue uses a few more levels of dependency

├─┬ @vue/cli-plugin-babel
│ ├─┬ @vue/babel-preset-app
│ │ ├─┬ @babel/preset-env

so you'll want to update the @vue/cli-plugin-babel package.

edited Mar 29 '19 at 00:17

answered Mar 29 '19 at 00:06

Phil

157,677
23
242
245

1

Hmm, seems it was a combination with the first suggestion to delete the package-lock.json and this one that had fixed it before. I reverted my package-lock.json file and just did those two suggestions and it does not fix it. Seems like something else must also be causing issues...I don't know, something still doesn't seem right. – Jeremy Mar 29 '19 at 00:31
Updating `@babel/preset-env` was the solution for a React project as well. Thanks for posting! – Enes Kirimi Mar 17 '20 at 11:11

How do I fix 'Browserslist: caniuse-lite is outdated' for my Vue build?

1 Answers1