How to fix "Module build failed (from ./node_modules/postcss-loader/src/index.js)"

Question

I'm executing ng serve and it fails to compile after the chunks are produced.

The same repository is working on a colleague's machine, with same versions as below:

Node version: 10.16.3
NPM version: 6.9.0
@angular/cli: 7.3.9

Also tried:

With nodejs lts/Dubnium, encountered same error.
Tried npm i after force cleaning the npm cache.
Removing node and npm from the system and reinstalling everything.

Command executed: ng serve

The error is:

ERROR in ./src/assets/css/style.css (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./src/assets/css/style.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: Cannot read property 'type' of undefined
    at /home/akashj/workspace/projects/frontEnd/src/assets/css/style.css:1999:3
    at stringifyNode (/home/akashj/workspace/projects/frontEnd/node_modules/postcss-value-parser/lib/stringify.js:2:19)
    at Function.stringify (/home/akashj/workspace/projects/frontEnd/node_modules/postcss-value-parser/lib/stringify.js:45:10)
    at Gradient.colorStops (/home/akashj/workspace/projects/frontEnd/node_modules/autoprefixer/lib/hacks/gradient.js:505:26)
    at Gradient.oldWebkit (/home/akashj/workspace/projects/frontEnd/node_modules/autoprefixer/lib/hacks/gradient.js:398:10)
    at Gradient.replace (/home/akashj/workspace/projects/frontEnd/node_modules/autoprefixer/lib/hacks/gradient.js:91:30)
    at Gradient.add (/home/akashj/workspace/projects/frontEnd/node_modules/autoprefixer/lib/value.js:148:20)
    at Gradient.add (/home/akashj/workspace/projects/frontEnd/node_modules/autoprefixer/lib/hacks/gradient.js:572:35)
    at Gradient.process (/home/akashj/workspace/projects/frontEnd/node_modules/autoprefixer/lib/prefixer.js:157:16)
    at /home/akashj/workspace/projects/frontEnd/node_modules/autoprefixer/lib/processor.js:327:15
    at /home/akashj/workspace/projects/frontEnd/node_modules/postcss/lib/container.js:190:18
    at /home/akashj/workspace/projects/frontEnd/node_modules/postcss/lib/container.js:135:18
    at Rule.each (/home/akashj/workspace/projects/frontEnd/node_modules/postcss/lib/container.js:101:16)
    at Rule.walk (/home/akashj/workspace/projects/frontEnd/node_modules/postcss/lib/container.js:131:17)
    at /home/akashj/workspace/projects/frontEnd/node_modules/postcss/lib/container.js:148:24
    at Root.each (/home/akashj/workspace/projects/frontEnd/node_modules/postcss/lib/container.js:101:16)
    at Root.walk (/home/akashj/workspace/projects/frontEnd/node_modules/postcss/lib/container.js:131:17)
ℹ ｢wdm｣: Failed to compile.

For the whole console output of ng serve: https://pastebin.com/maHX3pCC

@Isma, Hey, I found the cause and solved it! I will be adding the answer and the cause as I reach home. FYI: The issue was caused by an extra comma in a CSS declaration: background-image: linear-gradient(to right, #973a95, #055faa, ); — Akash Jobanputra
Follow the link which might help you. stackoverflow.com/a/67548425/11438030 — Milan Kumar

Akash Jobanputra Akash Jobanputra · Accepted Answer · 2019-12-05T06:00:06

I resolved it. The CSS on that line (shown below) had a comma at the end and had no values after that. And postcss was throwing error due to that.

background-image: linear-gradient(to right, #973a95, #055faa, );

Removed the comma and it worked as expected

background-image: linear-gradient(to right, #973a95, #055faa);

How to fix "Module build failed (from ./node_modules/postcss-loader/src/index.js)"

1 Answers