[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.

Advertisements

2 comments

  1. Thanks for the great article. I will post it in Browserslist twitter account.

    But I can’t supper adding not op_mini all to any project. This browser is very popular in Afrika and India (without any option to replace it) and banning it close the Internet to many people. You should do it only if you are 100% sure, that there are no other options (and we as the developer community, we should not promote it).

    Liked by 1 person

    1. Thank you, Andrey for your kind words and the great suggestion.

      Reading more about browserlist on https://github.com/browserslist/browserslist/blob/master/README.md
      I was not aware about the use of op_mini. The Opera Mini browser sure is popular here, and we shouldn’t remove it until and unless 100% sure. One more thing to note here is that browserlist of this particular format actually got added automatically when creating a react app through react-create-app in package.json. I didn’t change it, since it was done by default.

      I think we should file an issue to fix the same. Many developers like me might have not cared about these annotations and were mislead into locking out other browsers. Since it is added by default. Thanks again.

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s