New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Module build failed: BrowserslistError: Unknown browser query `dead` #266

Closed
Prabhagar06 opened this Issue Jun 1, 2018 · 69 comments

Comments

Projects
None yet
@Prabhagar06
Copy link

Prabhagar06 commented Jun 1, 2018

error

Could you please help me

@ai

This comment has been minimized.

Copy link
Member

ai commented Jun 1, 2018

It happpens because of old cssnano (it uses old Browserslist without dead query).

We are triting to release cssnano 4 (with new Browserslist) ASAP

@ai

This comment has been minimized.

Copy link
Member

ai commented Jun 1, 2018

What you can do right now:

  1. Disable CSS minimization in webpack. Just use webpack csso plugin.
  2. Wait for cssnano 4 release
@Prabhagar06

This comment has been minimized.

Copy link

Prabhagar06 commented Jun 4, 2018

Can you please explain how to disable CSS minimization in webpack? because i am new to this.
Thanks

@ai

This comment has been minimized.

Copy link
Member

ai commented Jun 4, 2018

@Prabhagar06 show your webpack config

@Prabhagar06

This comment has been minimized.

Copy link

Prabhagar06 commented Jun 5, 2018

Ya. I have done it myself. thanks

@SidV7

This comment has been minimized.

Copy link

SidV7 commented Jun 20, 2018

Hello @Prabhagar06 @ai could you please provide the steps to disable the CSS minimization in webpack as I'm facing the same issue.

@ai

This comment has been minimized.

Copy link
Member

ai commented Jun 20, 2018

Try to pass:

{
  loader: 'css-loader',
  options: {
    minimize: false
  }
}
@SidV7

This comment has been minimized.

Copy link

SidV7 commented Jun 20, 2018

Included the above code in webpack.config.js under node_modules/xxhashjs/webpack.config.js but did not resolve the issue. Sorry i'm new to this. Could you please direct if i'm making the changes at the correct place? Thanks

var path = require("path")
module.exports = {
"entry": "./lib/index.js"
, "output": {
"path": __dirname + "/build"
, "filename": "xxhash.js"
, "library": "XXH"
, "libraryTarget": "umd"
}
,"loader":'css-loader'
,"options": {
minimize: false
}
}

@ai

This comment has been minimized.

Copy link
Member

ai commented Jun 20, 2018

@SiddarthVaikunthe sorry, ask webpack team for it ;)

@Splaktar

This comment has been minimized.

Copy link

Splaktar commented Jun 25, 2018

If you are seeing this with the autoprefixer default settings (which include not dead), then you can work around it by using the following string:

> 0.5%, last 2 versions, Firefox ESR, not ie <= 10, not ie_mob <= 10, not bb <= 10, not op_mob <= 12.1
@ai

This comment has been minimized.

Copy link
Member

ai commented Jul 7, 2018

Update css-loader to 1.0.0. It will fix this problem with unknown queries.

@ai ai closed this Jul 7, 2018

@juanr2001

This comment has been minimized.

Copy link

juanr2001 commented Jul 12, 2018

This is not closed, this issue is happening...

./node_modules/css-loader??ref--6-1!./node_modules/postcss-loader/lib??ref--6-2!./node_modules/bootstrap/dist/css/bootstrap.css Module build failed: BrowserslistError: Unknown browser query dead at /project/node_modules/browserslist/index.js:164:11 at Array.reduce (<anonymous>) at resolve (/project/node_modules/browserslist/index.js:132:18) at browserslist (/project/node_modules/browserslist/index.js:224:16) at Browsers.parse (/project/node_modules/autoprefixer/lib/browsers.js:61:16) at new Browsers (/project/node_modules/autoprefixer/lib/browsers.js:52:30) at loadPrefixes (/project/node_modules/autoprefixer/lib/autoprefixer.js:70:24) at plugin (/project/node_modules/autoprefixer/lib/autoprefixer.js:81:24) at LazyResult.run (/project/node_modules/postcss/lib/lazy-result.js:277:20) at LazyResult.asyncTick (/project/node_modules/postcss/lib/lazy-result.js:192:32) at LazyResult.asyncTick (/project/node_modules/postcss/lib/lazy-result.js:204:22) at /project/node_modules/postcss/lib/lazy-result.js:197:27 at <anonymous> @ ./node_modules/bootstrap/dist/css/bootstrap.css 4:14-128 13:3-17:5 14:22-136 @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js

@ai

This comment has been minimized.

Copy link
Member

ai commented Jul 12, 2018

@juanr2001 Show your npm ls

@tncho

This comment has been minimized.

Copy link

tncho commented Jul 12, 2018

I'm encountering the same issue with Angular 5.2

@ai

This comment has been minimized.

Copy link
Member

ai commented Jul 12, 2018

@tncho are you sure that Angular 5.2 uses css-loader 1.0?

@tncho

This comment has been minimized.

Copy link

tncho commented Jul 12, 2018

@ai honestly I'm not sure, but I think not since I'm not seeing that dependency in the package / package-lock .json. The error in my case goes like this:

ERROR in ./node_modules/bootstrap/dist/css/bootstrap.min.css Module build failed: BrowserslistError: Unknown browser query 'dead' at C:\Users\tncho\Documents\projects\webapp\node_modules\br owserslist\index.js:164:11
do you happen to know what's wrong here? Thanks!

@ai

This comment has been minimized.

Copy link
Member

ai commented Jul 12, 2018

@tncho to fix this issue you must start to use css-loader 1.0.

Check your npm ls, find who load old Browserslist (before 3.0). Update the dependency.

@nicksterx

This comment has been minimized.

Copy link

nicksterx commented Jul 12, 2018

It looks like @angular/cli@1.7.4 has a dependency on autoprefixer@7.2.6 which has a dependency on browserslist@2.11.3

@bjohndev

This comment has been minimized.

Copy link

bjohndev commented Jul 12, 2018

This just started happening for me today after I manually deleted my npm_modules folder and ran npm install. Now when I try to run ng serve. I get the error below.

ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/bootstrap/dist/css/bootstrap.min.css Module build failed: BrowserslistError: Unknown browser query dead``

@ai

This comment has been minimized.

Copy link
Member

ai commented Jul 12, 2018

@bjohndev Check your npm ls, find who load old Browserslist (before 3.0). Update the dependency.

@bjohndev

This comment has been minimized.

Copy link

bjohndev commented Jul 12, 2018

@ai This is the same issue that @nicksterx mentioned. "It looks like @angular/cli@1.7.4 has a dependency on autoprefixer@7.2.6 which has a dependency on browserslist@2.11.3" , what command should I run to update which dependency?

@ai

This comment has been minimized.

Copy link
Member

ai commented Jul 12, 2018

@bjohndev current version is 6.0.8 😏.

Update @angular/cli in your package.json and then call npm update.

I recommend to use Yarn instead of npm since Yarn has very useful tool yarn upgrade-interactive --latest

@bjohndev

This comment has been minimized.

Copy link

bjohndev commented Jul 12, 2018

Thanks @ai below is my package.json. I'm not sure what to change there.

{ "name": "ey-tax-severance-tax-tool-cli", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build --prod", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^5.2.0", "@angular/cdk": "^5.2.0", "@angular/common": "^5.2.0", "@angular/compiler": "^5.2.0", "@angular/core": "^5.2.0", "@angular/forms": "^5.2.0", "@angular/http": "^5.2.0", "@angular/material": "^5.2.0", "@angular/platform-browser": "^5.2.0", "@angular/platform-browser-dynamic": "^5.2.0", "@angular/router": "^5.2.0", "@types/jspdf": "^1.1.31", "adal-angular4": "^2.0.16", "applicationinsights-js": "^1.0.18", "autotable": "^1.0.0", "bootstrap": "^4.1.1", "core-js": "^2.4.1", "font-awesome": "^4.7.0", "jquery": "^1.9.1", "jspdf": "^1.4.0", "jspdf-autotable": "^2.3.4", "jss": "^2.1.0", "popper.js": "^1.14.3", "primeng": "^5.2.6", "rxjs": "^5.5.6", "zone.js": "^0.8.19" }, "devDependencies": { "@angular/cli": "~1.7.3", "@angular/compiler-cli": "^5.2.0", "@angular/language-service": "^5.2.0", "@types/jasmine": "~2.8.3", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "codelyzer": "^4.0.1", "jasmine-core": "~2.8.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~2.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.1.2", "ts-node": "~4.1.0", "tslint": "~5.9.1", "typescript": "~2.5.3" } }

@nicksterx

This comment has been minimized.

Copy link

nicksterx commented Jul 12, 2018

@bjohndev Do you have another dev on your team with a working build? If you do can you take their package-lock.json? That's what I did to get to a working state but trying to figure out which package changed to break everything.

@ai

This comment has been minimized.

Copy link
Member

ai commented Jul 12, 2018

Look into npm ls again and try to find the first dependency, which bring you old Browserslist. Maybe they're is a dependency above @angular/cli in dependencies tree. You maybe need to update it or to create a issue and ask developer to update @angular/cli.

I am not Angular user, so I can't give you direct instructions. You can try to ask people in Angular slack to help you.

@bjohndev

This comment has been minimized.

Copy link

bjohndev commented Jul 12, 2018

@nicksterx I have my package-lock.json in source control. I'll have to look at that to see if I can determine what is happening. I have several projects setup without this problem.

@nicksterx

This comment has been minimized.

Copy link

nicksterx commented Jul 12, 2018

Figured it out! Bootstrap 4.1.2 is breaking things. They released it 6 hours ago. Not sure what is broken but changing my package.json bootstrap to 4.1.1 fixes it.

@bjohndev

This comment has been minimized.

Copy link

bjohndev commented Jul 12, 2018

@nicksterx I'll give this a try

@himrock922

This comment has been minimized.

Copy link

himrock922 commented Jul 15, 2018

Hi. My Project happened same error too.
2018-07-15 21 15 20

(This project using bootstrap, bootstrap-native, vue, and webpack...)
I updated the css-loader to 1.0.0 ver.
right...?

@freshcoderchan

This comment has been minimized.

Copy link

freshcoderchan commented Jul 15, 2018

Hello, @himrock922
I have just fixed this error after install bootstrap again.
Please run this command


npm install bootstrap.


This helped me.
Hope this help you.

@himrock922

This comment has been minimized.

Copy link

himrock922 commented Jul 15, 2018

Hi, @freshcoderchan.
Does your project use the css-loader?
My project fixed this error after the css-loader updated to 1.0.0 ver.

@freshcoderchan

This comment has been minimized.

Copy link

freshcoderchan commented Jul 15, 2018

Hi, @himrock922
My project doen't use css-loader.
I have tried to update bootstrap version, so I have fixed.
Thanks.

@pmeems

This comment has been minimized.

Copy link

pmeems commented Jul 16, 2018

Today I ran npm update and it gave me bootstrap v4.1.2.
npm start gives the Module build failed: BrowserslistError: Unknown browser query 'dead' error.
Changing my package.json from "bootstrap": "^4.1.2" to "bootstrap": "4.1.1" AND running npm install bootstrap solved my problem.

So it is definitely a problem in Bootstrap.

@akhilsanker

This comment has been minimized.

Copy link

akhilsanker commented Jul 16, 2018

Hi @pmeems ,
Your solution did the trick.
Thanks a lot.

@aviadatsnyk

This comment has been minimized.

Copy link

aviadatsnyk commented Jul 16, 2018

I got to this issue since I got the error myself. just want to point out bootstrap before 4.1.2 has 3 XSS vulnerabilities, so most of us would probably want to workaround the issue instead of downgrading. Another option is to just wait for the bootstrap fix and then upgrade, but this leaves you with an XSS vuln.
https://snyk.io/vuln/npm:bootstrap:20180529 (all the links to the bootstrap repo are there).
full disclosure: I work for Snyk (but posting vulns to github threads are not something we usually do, I just thought it would be of value to readers of this thread)

@nicksterx

This comment has been minimized.

Copy link

nicksterx commented Jul 16, 2018

I think this is related to how node-sass is loading the auto-prefixer or browserlist.
Node-Sass doesn't reference browserslist. I think it's angular/cli@1.7.4 and how it uses AutoPrefixer@7.2.6

@nicksterx

This comment has been minimized.

Copy link

nicksterx commented Jul 16, 2018

Bootstrap has a PR that should resolve this issue:
twbs/bootstrap#26896

@fralewsmi

This comment has been minimized.

Copy link

fralewsmi commented Jul 24, 2018

@amoses12

This comment has been minimized.

Copy link

amoses12 commented Sep 17, 2018

So sorry to keep this issue going, but I'm getting the same errors in a different situation. I'm running on bootstrap 3.3.7 and the solution works just fine for me. But when I push it to github and someone else pulls it, they get the "Error: Module Build failed: BrowserslistError: Unknown browser query 'dead'" error. How is it possible that we're running the exact same solution with the exact same packages, but my computer is the only one it works on? Any ideas would be greatly appreciated.

@ai

This comment has been minimized.

Copy link
Member

ai commented Sep 17, 2018

@amoses12 ask them to do rm -Rf node_modules && npm i

@amoses12

This comment has been minimized.

Copy link

amoses12 commented Sep 17, 2018

@amoses12 ask them to do rm -Rf node_modules && npm i

@ai thank you. I may try that in a minute, but now I've got 3 people that it's working for and 2 that it's not. We're trying to figure out if they're running different versions of node or are missing a dependency. I'll update if I find a solution.

@sellou

This comment has been minimized.

Copy link

sellou commented Oct 25, 2018

Bootstrap 4.1.3
css-loader 1.0.0
webpack 4

I fixed the problem by moving the browserlist fomr package.json to .browserlistrc file.

@ai

This comment has been minimized.

Copy link
Member

ai commented Oct 31, 2018

@paolocavanna sorry, but it is very bad way. Autoprefixer officially do not recommend it by few important reason.

First, there are a lot of different tools, which use Browserslist. If you will use browsers option, different tools in you build pipeline will have different browsers, it is cause a lot of problems.

Second, it is very likely that you have multiple Autoprefixer in your build pipeline. For instance, CSS minifiers often use Autoprefixer. With browsers option, different Autoprefixers will use different browsers.

@browserslist browserslist deleted a comment from paolocavanna Oct 31, 2018

@paolocavanna

This comment has been minimized.

Copy link

paolocavanna commented Oct 31, 2018

@ai you're totally right. Mine was just a temporary patch on a a project I'm working on and I didn't take into consideration the (now evident) trade offs.

@efectusmagnus

This comment has been minimized.

Copy link

efectusmagnus commented Dec 4, 2018

Just run 'npm install latest' in Git Bash (the terminal) to fix the problems.

@ai

This comment has been minimized.

Copy link
Member

ai commented Dec 5, 2018

@Graphap fix the source of the problem, not result. You need to update Browserslist in all components. By removing not dead you did not fix the problem. In your system different companies still use different browsers. It will create problems in different places.

@browserslist browserslist deleted a comment from Graphap Dec 5, 2018

@nicksterx

This comment has been minimized.

Copy link

nicksterx commented Dec 5, 2018

@ai Because this was fixed in bootstrap 4.1.3 should this thread be locked? These are a lot of solutions being suggested that are not helpful and probably confusing.

@ai

This comment has been minimized.

Copy link
Member

ai commented Dec 5, 2018

I do not like blocked issue. For my point of view, it is not welcome and should be used only to prevent conflict

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment