Vue BrowserslistError: Unknown browser query `dead`

The best way to replicated it:

1. Create a project: vue init webpack my-project
2. Install Bootrap-Vue. Follow the simple steps here: https://bootstrap-vue.js.org/docs

When project is running on dev, it returns this. ./node_modules/css-loader??ref--6-1!./node_modules/postcss-loader/lib??ref--6-2!./node_modules/bootstrap/dist/css/bootstrap.css Module build failed: BrowserslistError: Unknown browser querydead at /projectName/node_modules/browserslist/index.js:164:11 at Array.reduce (<anonymous>) at resolve (/projectName/node_modules/browserslist/index.js:132:18) at browserslist (/projectName/node_modules/browserslist/index.js:224:16) at Browsers.parse (/projectName/node_modules/autoprefixer/lib/browsers.js:61:16) at new Browsers (/projectName/node_modules/autoprefixer/lib/browsers.js:52:30) at loadPrefixes (/projectName/node_modules/autoprefixer/lib/autoprefixer.js:70:24) at plugin (/projectName/node_modules/autoprefixer/lib/autoprefixer.js:81:24) at LazyResult.run (/projectName/node_modules/postcss/lib/lazy-result.js:277:20) at LazyResult.asyncTick (/projectName/node_modules/postcss/lib/lazy-result.js:192:32) at LazyResult.asyncTick (/projectName/node_modules/postcss/lib/lazy-result.js:204:22) at /projectName/node_modules/postcss/lib/lazy-result.js:197:27 at <anonymous> @ ./node_modules/bootstrap/dist/css/bootstrap.css 4:14-128 13:3-17:5 14:22-136 @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js

I tried my best to fix it on .babelrc but it does not work

{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], "plugins": ["transform-vue-jsx", "transform-runtime"], "env": { "test": { "presets": ["env", "stage-2"], "plugins": ["transform-vue-jsx", "istanbul"] } } }

Here is my package.json

`{ “name”: “vue-components”, “version”: “1.0.0”, “jsnext:main”: “src/index.js”, “main”: “src/index.js”, “description”: “Vue native components”, “author”: “me”, “private”: true, “scripts”: { “dev”: “webpack-dev-server --inline --progress --config build/webpack.dev.conf.js”, “start”: “npm run dev”, “unit”: “cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run”, “e2e”: “node test/e2e/runner.js”, “test”: “npm run unit && npm run e2e”, “lint”: “eslint --ext .js,.vue src test/unit test/e2e/specs”, “build”: “node build/build.js” }, “dependencies”: { “bootstrap-vue”: “^2.0.0-rc.11”, “vue”: “^2.5.2”, “vue-router”: “^3.0.1” }, “devDependencies”: { “autoprefixer”: “^7.1.2”, “babel-core”: “^6.22.1”, “babel-eslint”: “^8.2.1”, “babel-helper-vue-jsx-merge-props”: “^2.0.3”, “babel-loader”: “^7.1.1”, “babel-plugin-istanbul”: “^4.1.1”, “babel-plugin-syntax-jsx”: “^6.18.0”, “babel-plugin-transform-runtime”: “^6.22.0”, “babel-plugin-transform-vue-jsx”: “^3.5.0”, “babel-preset-env”: “^1.3.2”, “babel-preset-stage-2”: “^6.22.0”, “babel-register”: “^6.22.0”, “chai”: “^4.1.2”, “chalk”: “^2.0.1”, “chromedriver”: “^2.27.2”, “copy-webpack-plugin”: “^4.0.1”, “cross-env”: “^5.0.1”, “cross-spawn”: “^5.0.1”, “css-loader”: “^0.28.0”, “eslint”: “^4.15.0”, “eslint-config-standard”: “^10.2.1”, “eslint-friendly-formatter”: “^3.0.0”, “eslint-loader”: “^1.7.1”, “eslint-plugin-import”: “^2.7.0”, “eslint-plugin-node”: “^5.2.0”, “eslint-plugin-promise”: “^3.4.0”, “eslint-plugin-standard”: “^3.0.1”, “eslint-plugin-vue”: “^4.0.0”, “extract-text-webpack-plugin”: “^3.0.0”, “file-loader”: “^1.1.4”, “friendly-errors-webpack-plugin”: “^1.6.1”, “html-webpack-plugin”: “^2.30.1”, “inject-loader”: “^3.0.0”, “karma”: “^1.4.1”, “karma-coverage”: “^1.1.1”, “karma-mocha”: “^1.3.0”, “karma-phantomjs-launcher”: “^1.0.2”, “karma-phantomjs-shim”: “^1.4.0”, “karma-sinon-chai”: “^1.3.1”, “karma-sourcemap-loader”: “^0.3.7”, “karma-spec-reporter”: “0.0.31”, “karma-webpack”: “^2.0.2”, “mocha”: “^3.2.0”, “nightwatch”: “^0.9.12”, “node-notifier”: “^5.1.2”, “optimize-css-assets-webpack-plugin”: “^3.2.0”, “ora”: “^1.2.0”, “phantomjs-prebuilt”: “^2.1.14”, “portfinder”: “^1.0.13”, “postcss-import”: “^11.0.0”, “postcss-loader”: “^2.0.8”, “postcss-url”: “^7.2.1”, “rimraf”: “^2.6.0”, “selenium-server”: “^3.0.1”, “semver”: “^5.3.0”, “shelljs”: “^0.7.6”, “sinon”: “^4.0.0”, “sinon-chai”: “^2.8.0”, “uglifyjs-webpack-plugin”: “^1.1.1”, “url-loader”: “^0.5.8”, “vue-loader”: “^13.3.0”, “vue-style-loader”: “^3.0.1”, “vue-template-compiler”: “^2.5.2”, “webpack”: “^3.6.0”, “webpack-bundle-analyzer”: “^2.9.0”, “webpack-dev-server”: “^2.9.1”, “webpack-merge”: “^4.1.0” }, “engines”: { “node”: “>= 6.0.0”, “npm”: “>= 3.0.0” }, “browserslist”: [ “> 1%”, “last 2 versions”, “not ie <= 8” ] }

[kmshelke]

I could resolve this with following steps: 1 Open Package.json of \node_module\bootstrap 2. Find “browserslist” 3. In the List (array) you will notice “not dead”, delete this line

That’s it. Bootstrap latest version has added this Not Dead thing in the browser list which is creating problem. Can anyone explain significance of Not Dead browser?

Regards,

Kuldip

[ai]

You must update css-loader to 1.0.

Maybe you should send PR to that bootstrap (sorry, I am not Vue user to be sure that I didn’t break anything; also this fix is a easy way to improve your GitHub page).