Skip to content
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

BrowserslistError: Unknown browser major at error #9020

Closed
marshallcool opened this Issue Dec 28, 2017 · 93 comments

Comments

Projects
None yet
@marshallcool
Copy link

marshallcool commented Dec 28, 2017

I just deleted the node_modules folder and put the packages back

macOs
Node 8
node: 8
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/compiler-cli": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",
"@angular/cli": "^1.5.0",
"@angular/compiler-cli": "^5.0.0",

Error:
ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/bootstrap/dist/css/bootstrap.min.css Module build failed: BrowserslistError: Unknown browser major at error (/Users/aleksandrgusev/Documents/express_client/node_modules/browserslist/index.js:37:11) at Function.browserslist.checkName (/Users/aleksandrgusev/Documents/express_client/node_modules/browserslist/index.js:320:18) at Function.select (/Users/aleksandrgusev/Documents/express_client/node_modules/browserslist/index.js:438:37) at /Users/aleksandrgusev/Documents/express_client/node_modules/browserslist/index.js:207:41 at Array.forEach (native) at browserslist (/Users/aleksandrgusev/Documents/express_client/node_modules/browserslist/index.js:196:13) at Browsers.parse (/Users/aleksandrgusev/Documents/express_client/node_modules/autoprefixer/lib/browsers.js:44:14) at new Browsers (/Users/aleksandrgusev/Documents/express_client/node_modules/autoprefixer/lib/browsers.js:39:28) at loadPrefixes (/Users/aleksandrgusev/Documents/express_client/node_modules/autoprefixer/lib/autoprefixer.js:56:18) at plugin (/Users/aleksandrgusev/Documents/express_client/node_modules/autoprefixer/lib/autoprefixer.js:62:18) at LazyResult.run (/Users/aleksandrgusev/Documents/express_client/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:270:20) at LazyResult.asyncTick (/Users/aleksandrgusev/Documents/express_client/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:185:32) at LazyResult.asyncTick (/Users/aleksandrgusev/Documents/express_client/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:197:22) at LazyResult.asyncTick (/Users/aleksandrgusev/Documents/express_client/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:197:22) at processing.Promise.then._this2.processed (/Users/aleksandrgusev/Documents/express_client/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:224:20) at LazyResult.async (/Users/aleksandrgusev/Documents/express_client/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:221:27) @ ./node_modules/bootstrap/dist/css/bootstrap.min.css 4:14-131 @ multi ./src/styles.scss ./src/select.css ./node_modules/bootstrap/dist/css/bootstrap.min.css ./node_modules/font-awesome/css/font-awesome.min.css ./node_modules/primeng/resources/primeng.min.css ./node_modules/primeng/resources/themes/omega/theme.css ./node_modules/material-design-icons/iconfont/material-icons.css

@dan655t

This comment has been minimized.

Copy link

dan655t commented Dec 28, 2017

Running into the same problem here.

@marshallcool

This comment has been minimized.

Copy link
Author

marshallcool commented Dec 28, 2017

Where ?

@bryan-pegg23

This comment has been minimized.

Copy link

bryan-pegg23 commented Dec 28, 2017

bootstrap's 4.0.0 beta 3 came out today. Might have to downgrade to their beta 2 again to make it work. I am running into the same issue.

@DamianKedzior

This comment has been minimized.

Copy link

DamianKedzior commented Dec 28, 2017

@bryan-pegg23 Thanks. Bootstrap was a problem in my case.

@RyanWillDev

This comment has been minimized.

Copy link

RyanWillDev commented Dec 28, 2017

The issue seems to be caused by this section of bootstrap's package.json file

 "browserslist": [
    "last 1 major version",
    ">= 1%",
    "Chrome >= 45",
    "Firefox >= 38",
    "Edge >= 12",
    "Explorer >= 10",
    "iOS >= 9",
    "Safari >= 9",
    "Android >= 4.4",
    "Opera >= 30"
  ],

The autoprefixer plugin uses this list and unless you have a version 7.0 or higher it does not support the last n major version syntax.

Upgrading autoprefixer should fix the issue.

@ekwebster

This comment has been minimized.

Copy link

ekwebster commented Dec 28, 2017

ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./node_modules/bootstrap/dist/css/bootstrap.min.css
Module build failed: BrowserslistError: Unknown browser major

Same error, just started happening.

Autoprefixer is at 6.7.7
Boostrap 4.0.0 beta.2

package.json

{
  "name": "apm",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve -o --port 3913",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint --type-check",
    "e2e": "ng e2e",
    "build-prod": "ng build --prod --aot"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.8",
    "angular-dual-listbox": "^4.4.0",
    "bootstrap": "^4.0.0-beta.2",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "jquery": "^1.9.1",
    "ng2-select": "^2.0.0",
    "ngx-progressbar": "^2.1.1",
    "ngx-toastr": "^6.5.0",
    "popper.js": "^1.12.3",
    "rxjs": "^5.4.1",
    "underscore": "^1.8.3",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.5.0",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/jquery": "^3.2.15",
    "@types/node": "~6.0.60",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "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": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.4.2"
  }
}

package-lock.json

"autoprefixer": {
      "version": "6.7.7",
      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-6.7.7.tgz",
      "integrity": "sha1-Hb0cg1ZY41zj+ZhAmdsAWFx4IBQ=",
      "dev": true
    },
    "bootstrap": {
      "version": "4.0.0-beta.2",
      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0-beta.2.tgz",
      "integrity": "sha512-DzGtdTlKbrMoGMpz0LigKSqJ+MgtFKxA791PU/q062OlRG0HybNZcTLH7rpDAmLS66Y3esN9yzKHLLbqa5UR3w=="
    },
 "postcss-loader": {
      "version": "1.3.3",
      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-1.3.3.tgz",
      "integrity": "sha1-piHqH6KQYqg5cqRvVEhncTAZFus=",
      "dev": true
    },
@arturovt

This comment has been minimized.

Copy link

arturovt commented Dec 28, 2017

@ekwebster "bootstrap": "^4.0.0-beta.2" the caret here means it will update you to the most recent version, just try yarn upgrade bootstrap@4.0.0-beta.2 or npm update bootstrap@4.0.0-beta.2

@RyanWillDev

This comment has been minimized.

Copy link

RyanWillDev commented Dec 28, 2017

@ekwebster It looks like the last n major versions syntax was added in browserList 2.4 and autoprefixer updated to version 2 of browserList in version 7.0.

So, any version of autoprefixer above 7.0 should work. I corrected my comment above.

@marcelolimabh

This comment has been minimized.

Copy link

marcelolimabh commented Dec 29, 2017

I have the same error

@mythz

This comment has been minimized.

Copy link

mythz commented Dec 29, 2017

Running into this issue as well trying to use the latest angular-cli "1.6.3" with the latest bootstrap "4.0.0-beta.2".

@oopsmails

This comment has been minimized.

Copy link

oopsmails commented Dec 29, 2017

Did you tried this? Same error and fixed by,

  • From "bootstrap": "^4.0.0-beta.2" to "bootstrap": "4.0.0-beta.2", take out "^"
  • Then npm install
  • Then ng serve
@ekwebster

This comment has been minimized.

Copy link

ekwebster commented Dec 29, 2017

Removing the caret ‘^’ did solve the problem

@krischandra

This comment has been minimized.

Copy link

krischandra commented Dec 29, 2017

I have the same issue instead i am getting warning.

WARNING in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":fal
se,"precision":8,"includePaths":[]}!./src/style-sheets/theme/theme.scss
(Emitted value instead of an instance of Error) postcss-custom-properties: C:\Users\krishna.chandra\Desktop\retail\ng-ui\src\style-sheets\theme\theme.scss:456:5: variable '--globalSub2' is undefined and u
sed without a fallback
NonErrorEmittedError: (Emitted value instead of an instance of Error) postcss-custom-properties: C:\Users\krishna.chandra\Desktop\retail\ng-ui\src\style-sheets\theme\theme.scss:456:5: variable '--globalSu
b2' is undefined and used without a fallback
at Object.emitWarning (C:\Users\krishna.chandra\Desktop\retail\ng-ui\node_modules\webpack\lib\NormalModule.js:117:16)
at result.warnings.forEach (C:\Users\krishna.chandra\Desktop\retail\ng-ui\node_modules\postcss-loader\lib\index.js:149:49)
at Array.forEach (native)
at postcss.process.then (C:\Users\krishna.chandra\Desktop\retail\ng-ui\node_modules\postcss-loader\lib\index.js:149:27)
@ ./src/style-sheets/theme/theme.scss 4:14-208
@ multi ./node_modules/bootstrap/dist/css/bootstrap.min.css ./node_modules/primeng/resources/themes/omega/theme.css ./node_modules/primeng/resources/primeng.min.css ./src/style-sheets/theme/theme.scss ./
node_modules/font-awesome/css/font-awesome.css
"4.0.0-beta.2" did not worked in my scenario.

@filipesilva

This comment has been minimized.

Copy link
Member

filipesilva commented Dec 29, 2017

This does seem to be related to bootstrap@4.0.0-beta.3, and is also causing failures in our CI (https://travis-ci.org/angular/angular-cli/jobs/322676874).

@ajinkya-vaze

This comment has been minimized.

Copy link

ajinkya-vaze commented Dec 29, 2017

I was facing same issue.
I downgraded bootstrap with following steps.
Uninstall bootstrap@4.0.0-beta.3:
npm uninstall bootstrap --save
Then installed bootstrap@4.0.0-beta.2:
npm install bootstrap@4.0.0-beta.2 --save

I did not remove ^ because package-lock.json will handle it.

@robertmazzo

This comment has been minimized.

Copy link

robertmazzo commented Jan 1, 2018

same problem here - on two different laptops. Why is beta.3 still up on their site ?

joaopgrassi added a commit to joaopgrassi/env-guard that referenced this issue Jan 1, 2018

@clydin

This comment has been minimized.

Copy link
Member

clydin commented Feb 1, 2018

1.7 will still support building Angular 4; as does 1.5 and 1.6. If you are encountering problems doing so, please open an issue describing the problem.

@jglisson

This comment has been minimized.

Copy link

jglisson commented Feb 1, 2018

Thanks @clydin

This may sound dumb then (and off topic, so I apologize). But how do you use ng new to create an angular 4 project with cli 1.5/6/7? I have been searching online quite a bit and the only thing I've found is using cli 1.4.10 (because 1.4.9 has an issue).

@yaswanth89kumar

This comment has been minimized.

Copy link

yaswanth89kumar commented Feb 2, 2018

The same problem i faced today.

I found my CLI was not upgraded. I upgraded my CLI globally and locally and it worked fine.
So always its good to upgrade our Angular CLI and then try to install packages.

@mauricewipf

This comment has been minimized.

Copy link

mauricewipf commented Feb 2, 2018

Bootstrap v4.0.0 has been released on Jan 18, 2018. So going to v4.0.0-alpha.x cannot be the best solution :-/

@jglisson

This comment has been minimized.

Copy link

jglisson commented Feb 2, 2018

I did the same as @yaswanth89kumar . I setup my project using angular-cli 1.4.10 and then upgraded the cli to latest.

@WuglyakBolgoink

This comment has been minimized.

Copy link

WuglyakBolgoink commented Feb 7, 2018

  • angular/cli@1.6.7
  • bootstrap v4.0.0

Module build failed: ModuleBuildError: Module build failed: BrowserslistError: Unknown browser major

"styles": [
        "../node_modules/bootstrap/scss/bootstrap.scss",
        "styles.scss"
      ]
+

"defaults": {
    "styleExt": "scss",
    "component": {}
  }

hot-fix see in last comment @joseph-schenck

@zhekaus

This comment has been minimized.

Copy link

zhekaus commented Feb 8, 2018

@angular/cli: 1.7.0-rc.0 solved the problem

@bomberblue07

This comment has been minimized.

Copy link

bomberblue07 commented Feb 8, 2018

While updating to @angular/cli: 1.7.0-rc.0 allowed my code to compile with --prod, all of my font-awesome icons in my app were replaced by squares

@Matmo10

This comment has been minimized.

Copy link

Matmo10 commented Feb 9, 2018

@bomberblue07 Same for me. 1.7.0-beta.1 Seems to solve both issues though.

But there's definitely some font issues in the newer 1.7.x versions.

For example, in my angular-cli.json styles section I might have "./assets/fonts/icon-fonts/icon-fonts.css", and in that css file I might have:

@font-face {
    font-family: "My icon fonts";
    src:url('./icon-fonts.eot');
    src:url('./icon-fonts.eot?#iefix') format('embedded-opentype'),
        url('./icon-fonts.woff') format('woff'),
        url('./icon-fonts.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

and then the browser has warnings about these woff/tff files being corrupted. I even downloaded them and compared them to the original, and they are in fact different.

I believe the error was introduced in 1.7.0-beta2 or 3. @filipesilva

@zhekaus

This comment has been minimized.

Copy link

zhekaus commented Feb 9, 2018

mprahl added a commit to release-engineering/mbs-ui that referenced this issue Feb 9, 2018

@spelbreker

This comment has been minimized.

Copy link

spelbreker commented Feb 15, 2018

update to ng cli 1.6.8 in project and global. works with bootstrap 4.0

@kylebradshaw

This comment has been minimized.

Copy link

kylebradshaw commented Feb 15, 2018

"bootstrap": "4.0.0-beta.2" is the sauce

@charsi

This comment has been minimized.

Copy link

charsi commented Feb 19, 2018

Changed cli version to 1.7.0 in package.json. Working as expected now.

@RobsonKarls

This comment has been minimized.

Copy link

RobsonKarls commented Feb 22, 2018

@joseph-schenck solution solved my problem

@JeckyOH

This comment has been minimized.

Copy link

JeckyOH commented Mar 24, 2018

Removing the caret ‘^’ of "bootstrap: ^4.0.0-beta.2" solved the problem.
Thanks for @oopsmails

@vicanand

This comment has been minimized.

Copy link

vicanand commented Mar 28, 2018

i have removed following two line from bootstrap/package.json file

"last 1 major version",
">= 1%",

mosquitojoe85 added a commit to mosquitojoe85/webpack-noReact that referenced this issue Mar 31, 2018

@ramkrishnakuldeep

This comment has been minimized.

Copy link

ramkrishnakuldeep commented May 18, 2018

@oopsmails
Thank you

@sunil237216

This comment has been minimized.

Copy link

sunil237216 commented Jul 17, 2018

"bootstrap": "4.0.0-beta.2" worked for me.

@andremarcondesteixeira

This comment has been minimized.

Copy link

andremarcondesteixeira commented Aug 6, 2018

updating bootstrap to 4.1.3 worked for me. I was facing this issue with bootstrap version 4.1.1

@wandersonsc

This comment has been minimized.

Copy link

wandersonsc commented Aug 13, 2018

Ha! that's odd, "node_modules/bootstrap/dist/css/bootstrap.min.css", did the trick.

bootstrap": "^4.1.3",
Angular CLI: 6.1.3

@saiyaff

This comment has been minimized.

Copy link

saiyaff commented Aug 17, 2018

@wandersonsc Probably the cli path tracking has changed I guess 🤔

I was facing the same issue with the bootstrap version 4.1.3 and cli v 6.1.4.
"node_modules/bootstrap/dist/css/bootstrap.min.css" did really solve it 😲

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.