Question

当我运行'npm start'时，应用程序启动正常，但是'npm run build'在终端上显示以下消息：

> workout_tracker@0.1.0 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! workout_tracker@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the workout_tracker@0.1.0 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! workout_tracker@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the workout_tracker@0.1.0 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"
}

Answer 1

使用React时，请查看您的package.json。您可能会在其中找到以下内容。

  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]

删除“没有死”，，然后再次运行yarn run build。为我解决了这个问题。

Answer 2

'dead'描述包含在较新的版本中。换句话说，.. / 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中的依赖版本

Answer 3

如果您有另一个使用非常旧的Browserslist的工具，就会发生这种情况。

致电npm ls，查找谁使用Browserslist <4并在其中打开问题以更新依赖项。

Answer 4

在"browserslist": []中设置package.json

Answer 5

如果您在package.json中没有“ Matthis Kohli”回答的代码，只需添加除“ not dead”部分以外的那些行，它应该看起来像这样

"browserslist": [
  ">0.2%",
  "not ie <= 11",
  "not op_mini all"
]

Answer 6

更新npm i autoprefixer修复了该问题：

{{1}}

Answer 7

更新 css-loader 到 1.0.0。如果浏览器列表没有解决这个问题，它会解决这个问题

 npm i css-loader@1.0.0

参考：https://github.com/browserslist/browserslist/issues/266

Answer 8

刚刚遇到这个问题并解决了它。

您的 package.json 文件中有两个浏览器列表条目，默认一个是“生产”。这是默认文本的样子：

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }

这是添加了development参数：

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [

    ]
  }

这应该可以解决瓶颈。

我相信 React 默认运行生产，并且默认构建命令会阻止构建具有较旧依赖项的应用程序（出于安全原因）。

BrowserslistError：React / Express App中未知的浏览器查询“死”

8 个答案: