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

ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_ modules/postcss-loader/lib?{"ident":"postcss","plugins":[null,null,null],"source Map":false}!./node_modules/bootstrap/dist/css/bootstrap.css #9080

Closed
unit11 opened this Issue Jan 3, 2018 · 28 comments

Comments

Projects
None yet
@unit11

unit11 commented Jan 3, 2018

Versions

<!--
Angular CLI: 1.5.5
Node: 8.9.1
OS: win32 x64
Angular: 5.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.5
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.5
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.8.1

-->

Repro steps

styles.css --->
@import '~bootstrap/dist/css/bootstrap.css';

Observed behavior

ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_ modules/postcss-loader/lib?{"ident":"postcss","plugins":[null,null,null],"source Map":false}!./node_modules/bootstrap/dist/css/bootstrap.css
Module build failed: BrowserslistError: Unknown browser major
at error (D:\angular\organicShop\node_modules\browserslist\index.js:37:11)
at Function.browserslist.checkName (D:\angular\organicShop\node_modules\brow serslist\index.js:320:18)
at Function.select (D:\angular\organicShop\node_modules\browserslist\index.j s:438:37)
at D:\angular\organicShop\node_modules\browserslist\index.js:207:41
at Array.forEach ()
at browserslist (D:\angular\organicShop\node_modules\browserslist\index.js:1 96:13)
at Browsers.parse (D:\angular\organicShop\node_modules\autoprefixer\lib\brow sers.js:44:14)
at new Browsers (D:\angular\organicShop\node_modules\autoprefixer\lib\browse rs.js:39:28)
at loadPrefixes (D:\angular\organicShop\node_modules\autoprefixer\lib\autopr efixer.js:56:18)
at plugin (D:\angular\organicShop\node_modules\autoprefixer\lib\autoprefixer .js:62:18)
at LazyResult.run (D:\angular\organicShop\node_modules\postcss-loader\node_m odules\postcss\lib\lazy-result.js:277:20)
at LazyResult.asyncTick (D:\angular\organicShop\node_modules\postcss-loader\ node_modules\postcss\lib\lazy-result.js:192:32)
at LazyResult.asyncTick (D:\angular\organicShop\node_modules\postcss-loader\ node_modules\postcss\lib\lazy-result.js:204:22)
at processing.Promise.then._this2.processed (D:\angular\organicShop\node_mod ules\postcss-loader\node_modules\postcss\lib\lazy-result.js:231:20)
at new Promise ()
at LazyResult.async (D:\angular\organicShop\node_modules\postcss-loader\node _modules\postcss\lib\lazy-result.js:228:27)
@ ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_module s/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./src/styles.css 3:10 -186
@ ./src/styles.css
@ multi ./src/styles.css

@dcatoday

This comment has been minimized.

dcatoday commented Jan 3, 2018

I am seeing this issue but my project doesn't use bootstrap.

@vinayakvinay

This comment has been minimized.

vinayakvinay commented Jan 3, 2018

Facing the same issue as mentioned above.
with Angular CLI 1.6,

"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.8",
"bootstrap": "^4.0.0-beta.3",
@vinayakvinay

This comment has been minimized.

vinayakvinay commented Jan 3, 2018

Duplicate:
@unit11 refer this thread
#9020

@clydin

This comment has been minimized.

Member

clydin commented Jan 3, 2018

Closing as a duplicate of #9020.

@clydin clydin closed this Jan 3, 2018

@unit11

This comment has been minimized.

unit11 commented Jan 4, 2018

Actually the problem is not happening for "bootstrap": "4.0.0-beta.2", so I have to shift to "bootstrap": "4.0.0-beta.3" in order to continue the project.I have updated the "^bootstrap": "4.0.0-beta.3" in th package.json file and run "npm install" and "ng serve".The problem is not happening in that case.

Package.json

{
"name": "sample-project",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"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",
"bootstrap": "4.0.0-beta.2",
"core-js": "^2.4.1",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular/cli": "1.5.5",
"@angular/compiler-cli": "^5.0.0",
"@angular/language-service": "^5.0.0",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"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.2.0",
"tslint": "~5.7.0",
"typescript": "~2.4.2"
}
}

npm install

ng serve

@maa105

This comment has been minimized.

maa105 commented Jan 4, 2018

this is related to:
#9061
I spent all day trying to fix it tried ~, ../node_modules, I defined a path @node_modules in "paths" in compilerOptions in tsconfig.json and used it nothing seems to work, so I reverted back to cli 1.5.5 but it required @angular/service-worker version to satisfy >= 1.0.0-beta.5 < 2.0.0 which I already updated to version 5.1.2, please help I'm stuck

@maa105

This comment has been minimized.

maa105 commented Jan 4, 2018

Im also getting some wierd mixup in the path characters:

Module not found: Error: Can't resolve './....node_modules☼ont-awesome☼onts☼ontawesome-webfont.eot' in 'c:\Users<user_name>\Desktop<project>\src'
resolve './....node_modules☼ont-awesome☼onts☼ontawesome-webfont.eot' in 'c:\Users<username>\Desktop<project>\src'

it seems everything after the / is either missing or is using some kind of escape sequence like "/f" in "/fontawesome" is displaying as "☼"

same thing with ionic icons:

Module not found: Error: Can't resolve './....node_modulesionic-angular☼ontsnoto-sans-bold.woff' in 'c:\Users<user_name>\Desktop<project>\src'
resolve './....node_modulesionic-angular☼ontsnoto-sans-bold.woff' in 'c:\Users<user_name>\Desktop<project>\src'

any ideas?

@vinayakvinay

This comment has been minimized.

vinayakvinay commented Jan 4, 2018

Use Bootstrap beta 2 instead.

douglasduteil added a commit to douglasduteil/angular-cli that referenced this issue Jan 4, 2018

fix(@angular/cli): Windows friendly tilde path resolution
Ensure that, on Windows, the path doesn't contain back slashes to be PostCSS friendly :)

Following angular#8791 
Closes angular#9077 angular#9061 angular#9080

douglasduteil added a commit to douglasduteil/angular-cli that referenced this issue Jan 4, 2018

fix(@angular/cli): Windows friendly tilde path resolution
Ensure that, on Windows, the path doesn't contain back slashes to be PostCSS friendly :)

Following #8791
Closes #9077 #9061 #9080
@myspivey

This comment has been minimized.

myspivey commented Jan 12, 2018

I just updated to the latest CLI on a Mac machine and am now getting this. Our project does not use Bootstrap in any aspect.

@dharders

This comment has been minimized.

dharders commented Jan 12, 2018

@myspivey Yeah I had the same experience. I don't use bootstrap either.

Downgrading to "@angular/cli": "1.6.3" fixed it for me. i.e. something changed in 1.6.4.

@billdwhite

This comment has been minimized.

billdwhite commented Jan 12, 2018

@myspivey same here: went to 1.6.4 and started getting this

@skiabox

This comment has been minimized.

skiabox commented Jan 12, 2018

The problem is not bootstrap related.
I get the same error when I am trying to use

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

inside styles.css.
That means that I cannot use angular material components!

@Shadowlauch

This comment has been minimized.

Shadowlauch commented Jan 12, 2018

I don't seem to be able to successfully import any css file in node_modules. Neither by using a relative path nor by using the ~. Imports that are in my application itself can be imported.

@import '~angular-tree-component/dist/angular-tree-component.css'; doesn't work

@import url('../../../../node_modules/font-awesome/css/font-awesome.min.css'); doesn't work

@import url('./sidebar.css'); this works

@huiaic

This comment has been minimized.

huiaic commented Jan 12, 2018

If you are not using bootstrap then it's due to another open bug - #9185

@SerafimovichEugene

This comment has been minimized.

SerafimovichEugene commented Jan 15, 2018

Had the same issue. I temporary inserted all global .css to .angular-cli.json. Builds fine.

...
"styles": [
        "styles.css",
        "../node_modules/font-awesome/css/font-awesome.css",
        "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
        "../node_modules/material-design-icons/iconfont/material-icons.css"
      ],
...
@hassansw

This comment has been minimized.

hassansw commented Jan 16, 2018

change it to:
@import "@angular/material/prebuilt-themes/indigo-pink.css";

by removing ~ fixed my problem

@jguingo

This comment has been minimized.

jguingo commented Jan 16, 2018

i had the same issue but solved when i've set
@import 'bootstrap/dist/css/bootstrap.css';
instead of
@import '~bootstrap/dist/css/bootstrap.css';

in the style.css , same solution as hassansw

@FabianAlvaradoDotCom

This comment has been minimized.

FabianAlvaradoDotCom commented Jan 16, 2018

@hassansw , It worked just fine! Thanks

By the way, it happened when I imported indigo theme:
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Removing the '~' saved my life.

@tiandiduwuxiaoxiao

This comment has been minimized.

tiandiduwuxiaoxiao commented Jan 18, 2018

Hi @SerafimovichEugene ,
I have the same issue and can't solve it although I try all methods I know.
I inserted bootstrap global .css to .angular.cli.json, like below but build failed:

"styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.css" ],

Any ideas for the issue mentioned above?
Thanks advance for your help.

@IK-Hwan

This comment has been minimized.

IK-Hwan commented Jan 18, 2018

@import "@angular/material/prebuilt-themes/indigo-pink.css";

remove '~'

@ghost

This comment has been minimized.

ghost commented Jan 18, 2018

(Working with Angular CLI 1.6.4 and Angular 5.2.1) I was @importing "../node_modules/material-design-icons/iconfont/material-icons.css" in my main stylesheet. I removed the @import and instead referenced this stylesheet in .angular-cli.json and it solved my problem.

@jeness

This comment has been minimized.

jeness commented Jan 19, 2018

I do npm install for redeployment for my project. I have the same issue too. I use ng-v to see if it is about version of angular-cli. I find out the version is 1.6.4 now. But I have stated in package.json that the version of angular-cli should be 1.4.3. So I just downgrade the angular-cli. npm install @angular/cli@1.4.3 And this build error solved.
May be this solution is not very smart enough. But it works for my project.

@DevJoseWeb

This comment has been minimized.

DevJoseWeb commented Jan 21, 2018

{
"name": "projeto-final",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@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",
"bootstrap": "^4.0.0",
"core-js": "^2.4.1",
"jquery": "^3.2.1",
"rxjs": "^5.1.0",
"zone.js": "^0.8.5",
"@angular-devkit/core": "0.0.28",
"@angular/animations": "^5.0.0",
"bluebird": "^3.5.1",
"body-parser": "^1.18.2",
"express": "^4.16.2",
"mongoose": "^4.13.1",
"morgan": "^1.9.0",
"serve-favicon": "^2.4.5"
},
"devDependencies": {
"@angular/cli": "1.6.4",
"@angular/compiler-cli": "^5.0.0",
"@types/jasmine": "~2.5.53",
"@types/node": "~6.0.60",
"codelyzer": "~3.2.0",
"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-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^1.2.1",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.4.2",
"@angular/language-service": "^5.0.0",
"@types/jasminewd2": "~2.0.2"
}
}

@HalShaw

This comment has been minimized.

HalShaw commented Jan 22, 2018

Angular4, ng build, same with this issue, not bootstrap, it's about icheck.

ERROR in ./node_modules/css-loader?{"sourceMap":false,"import":false}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/icheck/skins/all.css
Module build failed: Error: Can't resolve 'minimal/_all.css' in 'E:\workflow-manager\workflow-frontend\node_modules\icheck\skins'.

I'm developing angular app, when I run ng build, this error showed up. Don't konw it's a bug or not, is there any ideas? Thanks.

@sean-olson-e

This comment has been minimized.

sean-olson-e commented Jan 24, 2018

I implemented it same as @tiandiduwuxiaoxiao in the global css -- getting the same error. If I move the bootstrap.css file to the root of the node modules folder

"styles": [ "styles.css", "../node_modules/bootstrap.css" ],
or anywhere else above the node_modules directory, no problem. Seems like a problem with traversing the directory tree.

@usman10scorpio

This comment has been minimized.

usman10scorpio commented Apr 2, 2018

"bootstrap": "4.0.0-beta.2",

worked for me 👍

@pratikpawarnasik

This comment has been minimized.

pratikpawarnasik commented Apr 18, 2018

I have same issue using both of bootstrap versions

@sathishkanda123

This comment has been minimized.

sathishkanda123 commented Jun 15, 2018

I dont know , what the issue is your facing but in mine , i tried with refering stack overflow
npm uninstall -g angular-cli
npm cache clean or npm cache verify (if npm > 5)
npm install -g @angular/cli@latest
rm -rf node_modules
npm uninstall --save-dev angular-cli
npm install --save-dev @angular/cli@latest
npm install
and including my css by removing tilde sign (~nodemodules/..css to ../nodemodules/...css )

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