[Solved] “Module build failed: BrowserslistError: Unknown browser query `dead`” #React #npm

Not to keep you waiting, here is some background of my problem, followed up by a quick fix.

I built a ReactJS store application with a stack being GraphQL, Firebase, Apollo, Axios and much more. At the end of the package.json a browserlist is appended by default if you didn’t, in fact, put it there yourself. In my case, it came out of nowhere. It was probably added when I was deploying or through the command `create-react-app`. To know more what this is, here is a good read. Thanks to Andrey for informing about the value of Browserlist. Do give it a read, it might teach you a thing or to.

Also, this is where your error is coming from. Browserlist is a config to share a list of target browsers and Node.js versions between different front-end tools meant to filter out where and in what conditions your application can run smoothly. Its pretty cool.

Here’s a package.json that I have for my application.

{
  "name": "cotd",
  "version": "0.0.3",
  "private": true,
  "engines": {
    "npm": "5.6.0",
    "node": "9.11.1"
  },
  "devDependencies": {
    "concurrently": "3.5.1",
    "react-scripts": "^1.1.4"
  },
  "dependencies": {
    "apollo-boost": "^0.1.27",
    "autoprefixer-stylus": "0.14.0",
    "axios": "^0.18.0",
    "firebase": "^5.8.2",
    "graphql": "^14.1.1",
    "graphql-tag": "^2.10.1",
    "prop-types": "^15.6.0",
    "react": "^16.3.0-alpha.1",
    "react-apollo": "^2.4.1",
    "react-dom": "^16.3.0-alpha.1",
    "react-router-dom": "^4.2.2",
    "react-transition-group": "^2.2.1",
    "stylus": "0.54.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
  ]
}

I encountered the problem while deploying to Heroku. Apparently, the Build script that created the optimized build of the react app kept failing around some packages using old Browserlist versions. Hence, the term dead keeps coming up.  

Quick SOLUTION

Make a new file called .browserlistrc and cut the browserlist part away from package.json paste into the newly created file. There is a logic behind doing this, which is also mentioned on their official repository. Here, are the 2 files that we will be having.

.browserlistrc

{
"browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11"
  ]
}

package.json

{
  "name": "cotd",
  "version": "0.0.3",
  "private": true,
  "engines": {
    "npm": "5.6.0",
    "node": "9.11.1"
  },
  "devDependencies": {
    "concurrently": "3.5.1",
    "react-scripts": "^1.1.4"
  },
  "dependencies": {
    "apollo-boost": "^0.1.27",
    "autoprefixer-stylus": "0.14.0",
    "axios": "^0.18.0",
    "firebase": "^5.8.2",
    "graphql": "^14.1.1",
    "graphql-tag": "^2.10.1",
    "prop-types": "^15.6.0",
    "react": "^16.3.0-alpha.1",
    "react-apollo": "^2.4.1",
    "react-dom": "^16.3.0-alpha.1",
    "react-router-dom": "^4.2.2",
    "react-transition-group": "^2.2.1",
    "stylus": "0.54.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject"
  }
}

and you are done… Pat yourself, on the back. Deploy, run npm build command or whatever you wanted to do. It’s all good. If it doesn’t work, let me know down in the comments. There are some alternative solutions that I recommend checking out below.

Other solutions for people running Angular, Vue or other setups

1. Try going through this issue.
2. Upgrade your packages using npm update for good measure. If it works out, do a npm update --save to get your package.json setup saved into the file.
3. Check that your package.json is written accurately and syntactically correct. Parsing error of commas in your file is frustrating.
4. Some say it’s related to Bootstrap as well. Hence, this StackOverflow answer.

Why does this happen?

This error comes out from packages in your package.json using out-dated browserlist versions. So, either you bang your head against some 50 thousand packages using npm ls that are part of your application. Or you cut the cancer away so to speak 😇

I am still not sure of the exact why this happens as well. Do let me know if you zero in on the issue. I would love to update it on my blog as well.

Well, I sure think this helped you get through whatever you were trying to accomplish through this. If you like to see what code I am using it for. It can be found at @vipulgupta2048 on GitHub. Hit me up in the comments, if you need any more help.

Till then live in the mix, guys.