search

angular / angular-cli

CLI tool for Angular
https://cli.angular.dev
MIT License
26.78k stars 11.98k forks source link

BrowserslistError: Unknown browser major at error #9020

Closed marshallcool closed 6 years ago

marshallcool commented 6 years ago

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 commented 6 years ago

Running into the same problem here.

marshallcool commented 6 years ago

Where ?

bryan-pegg23 commented 6 years ago

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 commented 6 years ago

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

RyanWillDev commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

I have the same error

mythz commented 6 years ago

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 commented 6 years ago

Did you tried this? Same error and fixed by,

ekwebster commented 6 years ago

Removing the caret ‘^’ did solve the problem

krischandra commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

galcober-dtt commented 6 years ago

I have fixed my package.json to:

"bootstrap": "4.0.0-beta.2" If you have an app at production environment I think the best practice is to use a stable and fixed version.

Steps:

1-Remove /node_modules 2-Fix the package.json file 3-Execute npm install 4-Enjoy!

GhanemJR0 commented 6 years ago

I downgraded bootstrap to "bootstrap@4.0.0-beta.2" and the app back to work again

UtsavPreet commented 6 years ago

I'm also facing the same problem ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/bootstrap/dist/css/bootstrap.min.css

@ ./~/bootstrap/dist/css/bootstrap.min.css 4:14-127 @ multi ./~/bootstrap/dist/css/bootstrap.min.css webpack: Failed to compile.

ghost commented 6 years ago

still happening - also today had to specify beta 2 as 3 will produce same error as above

thejimgaudet commented 6 years ago

A workaround here on SO (https://stackoverflow.com/questions/48034051/bootstrap-4-beta-3-throws-error-with-angular-cli). Will need to re-run each time you upgrade, until the next version of CLI that updates autoprefixer to latest...

filipesilva commented 6 years ago

This should be fixed on Angular CLIs side in the next release (1.6.4). That should be next week.

thdavids07 commented 6 years ago

Thanks you, for the moment I copy manually the files of bootstrap beta 3 for beta 2 in my project "proy\node_modules\bootstrap\dist\css" and It could render normally Because I need use some styles that beta 2 do not has.

Domer79 commented 6 years ago

I changed the path to bootstrap.scss @import "~ bootstrap / scss / bootstrap.scss"; in the styles.scss file. And solved this problem Also adding packages node-sass and sass-loader

beginor commented 6 years ago

I have the same problem too.

Meowzz95 commented 6 years ago

Same problem here and @Domer79 's solution does not work, the angular CLI shows the same error

jameskentTX commented 6 years ago

You can use Bootstrap 4 beta 3, but first edit package.json in node_modules/bootstrap:

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

bmrana commented 6 years ago

@jameskentTX provided me with the workaround. Except the filename is package.json in the node_modules/bootstrap folder for me.

demoalbe commented 6 years ago

Hi! I upgraded to release 1.6.4, but i'm always facing the problem, using bootstrap@4.0.0-beta.3. Unfortunately I need to use that version of bootstrap because it fixes another problem. I'll try the workaround proposed some days ago, but I hope in a "cleaner" solution. Thank you for the support.

greuff commented 6 years ago

CLI 1.6.4 does not fix the problem.

PetrBainar commented 6 years ago

CLI 1.6.4 fixed the problem for me.

Taha-Di-Nero commented 6 years ago

The error persist only in production builds.

MegaFy commented 6 years ago

Temp Fix

Should work

ernitishkumar commented 6 years ago

CLI 1.6.4 does not fix the issue !! But after applying workaround by @jameskentTX its working. Since we wanted the beta 3 build of bootstrap in our project we have to use this workaround till Angular CLI fixes the issue.

ibagaric commented 6 years ago

You must combine @megafy and @jameskentTX solution

filipesilva commented 6 years ago

Can you try @angular/cli@1.7.0-beta.0 instead please? See https://github.com/angular/angular-cli/issues/9029#issuecomment-357267439 for more details.

Taha-Di-Nero commented 6 years ago

@filipesilva Yes using @angular/cli@1.7.0-beta.0 fix the issue.

ismailbaig commented 6 years ago

Even i am facing the same issue.

package.json { ... ...

"ngx-bootstrap": "^1.9.3", ... ... }

package-lock.json { ... "autoprefixer": "6.7.7", ... }

not able to resolve it. Any help

KostyaTretyak commented 6 years ago

I have @angular/cli@1.7.0-beta.0 but this problem has not disappeared. I noticed that problems arise inside src/styles.css and with @import '~any/lib/here.css';. That is, not depending on the library, if it is imported in this way. The main thing is that in the beginning there was a tilda.

/* This not works */
@import '~highlight.js/styles/default.css';
@import '~highlight.js/styles/googlecode.css';
@import '~font-awesome/css/font-awesome.min.css';
@import '~katex/dist/katex.min.css';

/* This works */
@import 'assets/css/angular.css';
@import 'assets/css/blog.css';
RowSolAdmin commented 6 years ago

Hit same issues defined above using cli 1.6.5 whilst trying to perform a production build.

Temp fix suggested by @jameskentTX above allowed production build to run.

Jimeh87 commented 6 years ago

I upgraded to @angular/cli@1.7.0-beta.1, created a new project, added bootstrap@^4.0.0 and I was able to start the app with bootstrap.min.css plumbed in by adding it as an @import to my styles.css. I was also able to start my app by plumbing it in via the .angular-cli.json by adding it to the styles.

A gotcha here would be to make sure you upgrade your global and your app to @angular/cli to 1.7.0-beta.1 and double check that it actually upgraded by running ng --version (mine didn't so I had to manually remove and reinstall it for some reason).

pranaysand commented 6 years ago

I had the same problem. this is because 4.0.0-beta.3 .please downgrade it to 4.0.0-beta.2 Detailed steps: In you pakage.json "bootstrap": "^4.0.0-beta.2" replace it with "bootstrap": "4.0.0-beta.2" ( remove the carrot sign) npm uninstall npm install This must fix it.

dereklin commented 6 years ago

Just upgrade from 4.0.0-beta to 4.0.0 and experienced this problem with ng serve. Went back to 4.0.0-beta and ng serve is ok. This issue shouldn't be closed if it's a cli issue.

dduft commented 6 years ago

Simply upgrading to @angular/cli@1.7.0-beta.1 solved the problem for me, like @Jimeh87 proposed.

seanmavley commented 6 years ago

@dduft But were we not informed ng cli 1.6.4+ would fix this issue, and on 1.6.4, I remember it was fixed.

Now on 1.6.5 and issue rears its ugly head. Is the CLI retrogressing?

@pranaysand The idea to downgrade doesn't ring well in my ears. On 1.6.3, it couldn't work with bootstrap 4.0.0-beta.3, so it had to be downgraded to work.

Now, on 1.6.5, to work, we need to downgrade to a beta of bootstrap?

clydin commented 6 years ago

Development builds were fixed. Production builds required additional changes which were already present but are only available in 1.7 (currently in beta). The stylesheet optimization pipeline was rewritten providing both increased performance and fixing multiple underlying issues. This however cannot be published in a patch release hence its presence in 1.7 and not 1.6.x.

marcuscraske commented 6 years ago

cli 1.7.0-beta.1 fixes the issue when using the latest released bootstrap (4.0.0) (not beta) as well.

symlo commented 6 years ago

Just globally update your angular/cli before starting a new project: npm i -g @angular/cli It works with beta 3, too !

nolvia80 commented 6 years ago

Hi all! I read all of yours comment and after I follow most of logs that the npm leave on my console (after a boring fight with bootstrap), so I uninstall and reinstall: npm uninstall bootstrap --save subsequently npm install bootstrap@4.0.0-beta.2 --save so I see in the console: this warning:

npm WARN bootstrap@4.0.0-beta.2 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer depe ndencies yourself. npm WARN bootstrap@4.0.0-beta.2 requires a peer of popper.js@^1.12.3 but none is installed. You must install peer dep endencies yourself.

I follow the suggest, so npm install jquery@1.9.1 --save and npm install popper.js@^1.12.3 --save finally: npm install and ng serve and IT WORK!!!

monuthakur commented 6 years ago

It's work.Thanks