ERROR Failed to compile with 1 errors 14:26:27
error in ./node_modules/bootstrap/dist/css/bootstrap.css
Module build failed: BrowserslistError: Unknown browser query `dead`
at /Users/hogehoge/workspace/test/node_modules/browserslist/index.js:164:11
Bootstrap Vueが入らない！なんで？っていうツイートを先日見かけて、
そんなに難しいところあったっけ？と自分も Getting Started - BootstrapVue を試したところ、私もハマりました。
解決方法を調べて記事にしたためている間に直ってしまったようですがメモしておきます。
TL;DR
今ならnpm updateすると直ると思います
原因
問題が発生していたのは、2018年5月1日(Bootstrap v4.1.1)〜2018年7月25日(Bootstrap v4.1.3)の間。
ちなみにこのケースでハマるのは、下記の条件を満たすプロジェクトみたいです。
1.vue init webpack proj_name で作ったプロジェクト
2.上記期間に npm i bootstrap-vue している
他にも、Vue以外のプロジェクトでハマるのは、現象的に下記のケースかなと。
1.npmで管理している
2.browserlistをprojectで使っている
3.上記期間に npm i bootstrap している
Unknown browser query `dead` · Issue #26876 · twbs/bootstrap
Release v4.1.3 · twbs/bootstrap
- 4.1.3
- Fixed: Moved the browserslist config from our package.json to a separate file to avoid unintended inherited browser settings across npm projects.
とのことですので、Bootstrapのbrowserslistの設定と自分のプロジェクトの設定がコンフリクトすると起きるみたいです。
対策1
差し支えなければ npm update するとパッケージのバージョンが全部あたらしくなるので直るようです。
対策2
npm update すると差し支えがある場合は、productionビルド以外のcssのminimizeを止めれば大丈夫とのこと。
Vueのwebpackテンプレートで作ったプロジェクトだとこんな感じで、
css-loader と postcss-loader の minimize を止めてあげればいいみたいです。
（前略 Line:18 くらいから）
const cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production', //←これを足す
sourceMap: options.sourceMap
}
}
const postcssLoader = {
loader: 'postcss-loader',
options: {
minimize: process.env.NODE_ENV === 'production', //←これを足す
sourceMap: options.sourceMap
}
}