「npm start」を実行すると、アプリは正常に起動しますが、「npm run build」を実行すると、ターミナルに次のメッセージが表示されます。
> [email protected] build /Users/*******/mern-workout/client
> react-scripts build
Creating an optimized production build...
Failed to compile.
./src/Components/UI/Spinner/Spinner.module.css
Module build failed: BrowserslistError: Unknown browser query `dead`
at Array.forEach (<anonymous>)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional
logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/*******/.npm/_logs/2018-10-22T23_21_04_691Z-debug.log
私は検索しましたが、Angularバージョンで問題が発生しているBootstrapを使用しているユーザー向けの唯一の解決策のようです。アプリでBootstrapを使用していません。
何が起こるかを確認するためだけにbrowserslist配列から "not dead"を削除してみました。
Creating an optimized production build...
Failed to compile.
Failed to minify the code from this file:
./node_modules/query-string/index.js:8
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/******/.npm/_logs/2018-10-22T23_41_55_488Z-debug.log
これが私のpackage.jsonファイルです:
{
"name": "workout_tracker",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"browserslist": "^4.3.1",
"cssnano": "^4.1.7",
"firebase": "^5.3.0",
"jw-paginate": "^1.0.2",
"jw-react-pagination": "^1.0.7",
"normalize.css": "^8.0.0",
"query-string": "^6.2.0",
"random-id": "0.0.2",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-headroom": "^2.2.2",
"react-icons-kit": "^1.1.6",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"react-scripts-cssmodules": "^1.1.10",
"react-swipe-to-delete-component": "^0.3.4",
"react-swipeout": "^1.1.1",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"css-loader": "^1.0.0",
"redux-devtools-extension": "^2.13.5",
"webpack": "^3.8.1"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"proxy": "http://localhost:4000"
}
「死んだ」記述は新しいバージョンに含まれています。つまり、「デッド」は../node_modules/autoprefixer-stylus/node_modules/browserslist/index.jsで定義されていません。
上記の../browserlist/index.jsファイルを開くと、次のように表示されます。
var QUERIES = [
{
regexp: /^last\s+(\d+)\s+major versions?$/i,
select: function (context, versions) ...
},
...,
]
そこに以下を追加できます:
{
regexp: /^dead$/i,
select: function (context) {
var dead = ['ie <= 10', 'ie_mob <= 10', 'bb <= 10', 'op_mob <= 12.1']
return resolve(dead, context)
}
}
これは、package-json.lockの依存関係バージョンを変更せずにうまく機能しました
これは、非常に古いBrowserslistを使用する別のツールがある場合に発生します。
npm ls
を呼び出して、Browserslist <4を使用しているユーザーを見つけ、そこで問題を開いて依存関係を更新します。
「Matthis Kohli」で回答されたようにpackage.jsonにコードがない場合は、「死んでいない」部分以外の行を追加するだけで、次のようになります。
"browserslist": [
">0.2%",
"not ie <= 11",
"not op_mini all"
]