BrowserslistError: Unknown browser major at error

[marshallcool]

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]

Running into the same problem here.

[marshallcool]

Where ?

[bryan-pegg23]

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]

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

[RyanWillDev]

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]

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]

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

[RyanWillDev]

@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]

I have the same error

[mythz]

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]

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]

Removing the caret ‘^’ did solve the problem

[krischandra]

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 does seem to be related to [email protected], and is also causing failures in our CI (https://travis-ci.org/angular/angular-cli/jobs/322676874).

[ajinkya-vaze]

I was facing same issue.
I downgraded bootstrap with following steps.
Uninstall [email protected]:
npm uninstall bootstrap --save
Then installed [email protected]:
npm install [email protected] --save

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

[robertmazzo]

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

[jglisson]

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]

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]

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]

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

[WuglyakBolgoink]

• angular/[email protected]
• 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]

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

[bomberblue07]

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]

@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]

@bomberblue07 , @Mathou54 , #9557

[spelbreker]

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

[kylebradshaw]

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

[charsi]

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

[robisonkarls]

@joseph-schenck solution solved my problem

[JeckyOH]

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

[vicanand]

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

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

[ramkrishnakuldeep]

@oopsmails
Thank you

[sunil237216]

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

[andremarcondesteixeira]

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

[wandersonsc]

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]

@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 😲

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}