angular-cli: Error: [object Object] is not a PostCSS plugin After updating to Angular 11.1.0

🐞 bug report

Affected Package

the application itself

Is this a regression?

Not a regression

Description

I updated my app from Angular 11.0.9 to Angular 11.1.0 because there was a bug with the HttpClient and now it doesn’t compile

🔬 Minimal Reproduction

I ran

ng update @angular/cdk @angular/core @angular/cli @angular/material

Process finished successfully

And then tried to ng serve or ng build and yields the output below

🔥 Exception or Error


✔ Browser application bundle generation complete.

Error: ./src/main.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
NonErrorEmittedError: (Emitted value instead of an instance of Error) Error: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: [object Object] is not a PostCSS plugin
    at Processor.normalize (/Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/postcss/lib/processor.js:168:15)
    at new Processor (/Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/postcss/lib/processor.js:52:25)
    at postcss (/Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/postcss/lib/postcss.js:55:10)
    at Object.loader (/Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/postcss-loader/dist/index.js:94:41)
    at /Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/webpack/lib/NormalModule.js:313:13
    at /Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/@ngtools/webpack/src/ivy/loader.js:57:9
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
 @ multi ./src/main.ts main[0]

Error: ./src/polyfills.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
NonErrorEmittedError: (Emitted value instead of an instance of Error) Error: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: [object Object] is not a PostCSS plugin
    at Processor.normalize (/Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/postcss/lib/processor.js:168:15)
    at new Processor (/Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/postcss/lib/processor.js:52:25)
    at postcss (/Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/postcss/lib/postcss.js:55:10)
    at Object.loader (/Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/postcss-loader/dist/index.js:94:41)
    at /Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/webpack/lib/NormalModule.js:313:13
    at /Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/@ngtools/webpack/src/ivy/loader.js:57:9
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
 @ multi ./src/polyfills.ts polyfills[0]

Error: ./src/bootstrap-grid.min.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: [object Object] is not a PostCSS plugin
    at Processor.normalize (/Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/postcss/lib/processor.js:168:15)
    at new Processor (/Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/postcss/lib/processor.js:52:25)
    at postcss (/Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/postcss/lib/postcss.js:55:10)
    at Object.loader (/Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/postcss-loader/dist/index.js:94:41)
    at /Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/webpack/lib/NormalModule.js:316:20
    at /Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.loader (/Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/postcss-loader/dist/index.js:103:7)
 @ multi ./src/assets/style/tailwind-out.css ./src/bootstrap-grid.min.css ./src/assets/style/styles.scss styles[1]

Error: ./src/assets/style/tailwind-out.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: [object Object] is not a PostCSS plugin
    at Processor.normalize (/Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/postcss/lib/processor.js:168:15)
    at new Processor (/Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/postcss/lib/processor.js:52:25)
    at postcss (/Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/postcss/lib/postcss.js:55:10)
    at Object.loader (/Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/postcss-loader/dist/index.js:94:41)
    at /Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/webpack/lib/NormalModule.js:316:20
    at /Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.loader (/Users/miquel/AngularProjects/mit-evida/frontend/web/node_modules/postcss-loader/dist/index.js:103:7)
 @ multi ./src/assets/style/tailwind-out.css ./src/bootstrap-grid.min.css ./src/assets/style/styles.scss styles[0]

Error: ./src/assets/style/styles.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: [object Object] is not a PostCSS plugin

🌍 Your Environment

Angular Version:



     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 11.1.0
Node: 14.15.0
OS: darwin x64

Angular: 11.1.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1101.0
@angular-devkit/build-angular   0.1101.0
@angular-devkit/core            11.1.0
@angular-devkit/schematics      11.1.0
@schematics/angular             11.1.0
@schematics/update              0.1101.0
rxjs                            6.6.3
typescript                      4.0.5

Anything else relevant? Nothing else, can’t build the app

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 21
Comments: 25 (11 by maintainers)

Commits related to this issue

fix(@angular-devkit/build-angular): resolve postcss from build-angular package `postcss-loader` version 4.2.0 added an `implementation` option. Using the using will ensure that the correct postcss ve... — committed to angular/angular-cli by alan-agius4 3 years ago
fix(@angular-devkit/build-angular): resolve postcss from build-angular package `postcss-loader` version 4.2.0 added an `implementation` option. Using the using will ensure that the correct postcss ve... — committed to angular/angular-cli by alan-agius4 3 years ago

Most upvoted comments

Just published v11.1.1 which should contain the necessary fixes for this issue. Please update to that version.

dgp1130 on Jan 22, 2021

Good news for the HttpClient reference errors (and other reference errors): the root cause has already been found and is being addressed in #19841

JoostK on Jan 21, 2021

I solved this by running: rm -rf node_modules && npm cache clear --force && npm install

ghaschel on Jan 21, 2021

OK so there are two issues here:

PostCSS dependency - this can be worked around by installing it directly at the top level npm i postcss -D
Missing HttpClient import - looking into this now.

petebacondarwin on Jan 21, 2021

I confirm that running npm i postcss -D makes the error about PostCSS go away. I have no injection errors in regards of the HttpClient.

mrctrifork on Jan 21, 2021

I have a strong belief that is due to the PostCSS update. Before Angular 11 used PostCSS 7 and now I’ve seen on my package-lock.json plenty of references to PostCSS 8.

I am freaking out a little bit because this error:

imagen

Is a PostCSS error when referencing the main.ts file

mrctrifork on Jan 21, 2021

@mrctrifork if you do npm i postcss -D that error will be gone atleast in my case but HttpClient is still not defined

jerkovicl on Jan 21, 2021

The postcss errors have been traced to an npm package hoisting inconsistency which causes the wrong version of postcss to be used. From initial tests, it does not appear that yarn is affected. However, a fix is currently pending for the CLI (#19847) that will force the postcss-loader package (using a recently released new option) to use the correct version of postcss even in these cases.

In regards to the reference errors (fix pending as well: #19841), the emitDecoratorMetadata option is responsible for the initial creation of the code that is being subsequently broken. This TypeScript configuration option is no longer required by Angular (8.0.4+) and newly created projects no longer contain the option. Unless a third-party library or application code specifically requires the option, it can be safely removed. The need for this option is generally uncommon. Also of note is that the option generates code (more details) that has the potential to cause runtime errors with certain source code constructs. However, for the cases where the option is required, a fix will be in the next patch release.

clydin on Jan 22, 2021

I’m having the same problem as OP, and neither npm ci nor rm -rf node_modules && npm cache clear --force && npm install solved it 😬

acalvo on Jan 21, 2021