ERROR in Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/mini-css-extract-plugin/dist/loader.js)

Question

When I run ng build --prod get this error. It can serve without error but it can't build. I relay tied with that

ERROR in Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/mini-css-extract-plugin/dist/loader.js):       
TypeError: Cannot read property 'replace' of undefined
    at normalizeBackSlashDirection (C:\project\tea supply chain mangement system\test2\node_modules\webpack\lib\RequestShortener.js:16:17)  
    at new RequestShortener (C:\project\tea supply chain mangement system\test2\node_modules\webpack\lib\RequestShortener.js:26:15)
    at new Compiler (C:\project\tea supply chain mangement system\test2\node_modules\webpack\lib\Compiler.js:195:27)
    at Compiler.createChildCompiler (C:\project\tea supply chain mangement system\test2\node_modules\webpack\lib\Compiler.js:548:25)        
    at Compilation.createChildCompiler (C:\project\tea supply chain mangement system\test2\node_modules\webpack\lib\Compilation.js:2100:24) 
    at Object.pitch (C:\project\tea supply chain mangement system\test2\node_modules\@angular-devkit\build-angular\node_modules\mini-css-extract-plugin\dist\loader.js:89:43)

My dependencies:

"dependencies": {
  "@agm/core": "^1.1.0",
    "@angular/animations": "8.2.14",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "8.2.14",
    "@angular/compiler": "8.2.14",
    "@angular/core": "^8.2.14",
    "@angular/http": "^7.2.15",
    "@angular/material": "^8.2.3",
    "@angular/router": "8.2.14",
       ....
    "web3": "^1.2.4",
    "zone.js": "0.9.1"   
},   
   "devDependencies": {  
   "@angular-builders/custom-webpack": "^8.4.1",
    "@angular-builders/dev-server": "^7.3.1",
    "@angular-devkit/build-angular": "^0.803.21",
    "@angular-devkit/architect": "^0.803.21",
    "@angular/cli": "^8.3.21",
    "@angular/compiler-cli": "^8.2.14",
    "@angular/language-service": "8.2.14",
    .....
  }

How to solve this error?

Why are you using v7 of the Angular CDK which is intended for applications using Angular v7, instead of updating to v8 of the Angular CDK? — Edric
– Edric, Commented Dec 26, 2019 at 14:21
You should also update the other Angular dependencies that are targeting v7 of the Angular framework. — Edric
– Edric, Commented Dec 26, 2019 at 15:28
i update all dependencies one by one . but it get same error — Tharindu Vindula
– Tharindu Vindula, Commented Dec 26, 2019 at 21:56

Jonathan Pool · Accepted Answer · 2020-01-11 19:03:16Z

2

The discussion at https://github.com/webpack-contrib/mini-css-extract-plugin/issues/186 includes a statement that this error occurs when any component has a styleUrls property whose array value has a length greater than 1.

I verified this in an application where reducing the value of this property to an array of length 1 made the error disappear.

answered Jan 11, 2020 at 19:03

Jonathan Pool

3991 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tharindu Vindula · Accepted Answer · 2019-12-27 19:12:27Z

1

in my case some css not work properly that's why get this error.it found when i check one by one. because this error hidden other errors.

answered Dec 27, 2019 at 19:12

Tharindu Vindula

1,2121 gold badge10 silver badges18 bronze badges

Comments

Uwe Keim · Accepted Answer · 2021-04-25 08:58:07Z

0

I had this error because I've made a mistake of putting "" is styles list in angular.json file. I wanted to add css file and started typing but I made it the other way and I left this "" there.

"styles": [
  "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "" /* <--- this line breaks everything */
],

edited Apr 25, 2021 at 8:58

Uwe Keim

40.9k61 gold badges193 silver badges309 bronze badges

answered Apr 25, 2021 at 8:32

ArturL

12 bronze badges

Collectives™ on Stack Overflow

ERROR in Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/mini-css-extract-plugin/dist/loader.js)

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related