BrowserslistError: Unknown browser query `dead` in React/Express App

user_5932606 0
Viewed 21015

When I run 'npm start', the app starts just fine but 'npm run build' gives me the following message in the terminal:

> 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

I've searched but, the only solutions seem to be for people using Angular who are having some issue with their Bootstrap version. I am not using Bootstrap in my app.

I tried removing "not dead" from the browserslist array just to see what would happen and i got this:

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

Here is my package.json file:

 {
  "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"
}
package.json npm webpack reactjs dependencies
9 Answers

When using React please take a look into your package.json. You may find the following added there.

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

Remove "not dead", and run yarn run build again. Fixed the issue for me.

user_48593520

'dead' description comes in the newer versions. In other words 'dead' is not defined in ../node_modules/autoprefixer-stylus/node_modules/browserslist/index.js.

If you open the above ../browserlist/index.js file, you will see:

var QUERIES = [
  {
    regexp: /^last\s+(\d+)\s+major versions?$/i,
    select: function (context, versions) ...
  },
  ...,
]

You can add the following in there:

{
  regexp: /^dead$/i,
  select: function (context) {
    var dead = ['ie <= 10', 'ie_mob <= 10', 'bb <= 10', 'op_mob <= 12.1']
    return resolve(dead, context)
  }
}

That worked fine for me without changing the dependency version in the package-json.lock

user_102771160

It happens if you have another tool, which uses very old Browserslist.

Call npm ls, find who use Browserslist < 4 and open issue there to update dependencies.

user_8085370

Set "browserslist": [] in package.json

user_105675400

Updating autoprefixer fixed it:

npm i autoprefixer
user_17516400
user_128472600

just ran into this problem and solved it.

There are two browserlist entries in your package.json file, and the default one is the "production". This is what the text looks like by default:

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

This is with the added development parameter:

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

    ]
  }

That should resolve the bottleneck.

I believe React runs production by default, and building an application with older dependencies is prevented by the default build command (for safety reasons).

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



 ***ok****
    browserslist": {
        "production": [
          ">0.2%",
          "not op_mini all"
        ],
user_167295650

If you dont have the codes in package.json as answered by 'Matthis Kohli' just add those lines except the "not dead" part, it should look like this

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