Error: [object Object] is not a PostCSS plugin After update to angular 12

[ofirrifo]

🐞 Bug report

I upgrade angular and angular material from 11 to 12.
When I'm serve the project npm start I start to see this error

styles.css - Error: styles.css from Css Minimizer
Error: [object Object] is not a PostCSS plugin
    at Processor.normalize (/Users/ofirf 1/dev/management/mgmt-console/node_modules/postcss/lib/processor.js:168:15)
    at new Processor (/Users/ofirf 1/dev/management/mgmt-console/node_modules/postcss/lib/processor.js:52:25)
    at postcss (/Users/ofirf 1/dev/management/mgmt-console/node_modules/postcss/lib/postcss.js:55:10)
    at cssnanoPlugin (/Users/ofirf 1/dev/management/mgmt-console/node_modules/cssnano/dist/index.js:137:31)
    at cssnanoMinify (eval at transform (/Users/ofirf 1/dev/management/mgmt-console/node_modules/css-minimizer-webpack-plugin/dist/minify.js:34:28), <anonymous>:51:33)
    at minify (/Users/ofirf 1/dev/management/mgmt-console/node_modules/css-minimizer-webpack-plugin/dist/minify.js:15:32)
    at Object.transform (/Users/ofirf 1/dev/management/mgmt-console/node_modules/css-minimizer-webpack-plugin/dist/minify.js:35:24)
    at execFunction (/Users/ofirf 1/dev/management/mgmt-console/node_modules/jest-worker/build/workers/threadChild.js:158:17)
    at execHelper (/Users/ofirf 1/dev/management/mgmt-console/node_modules/jest-worker/build/workers/threadChild.js:137:5)
    at execMethod (/Users/ofirf 1/dev/management/mgmt-console/node_modules/jest-worker/build/workers/threadChild.js:141:5)

I saw this closed issue but
execute the command rm -rf node_modules && npm cache clear --force && npm install as suggested not help.

Command (mark with an x)

• serve

Is this a regression?

Yes it regression, when I back to the master branch with angular 11 it work as should.

🔥 Exception or Error

styles.css - Error: styles.css from Css Minimizer
Error: [object Object] is not a PostCSS plugin
    at Processor.normalize (/Users/ofirf 1/dev/management/mgmt-console/node_modules/postcss/lib/processor.js:168:15)
    at new Processor (/Users/ofirf 1/dev/management/mgmt-console/node_modules/postcss/lib/processor.js:52:25)
    at postcss (/Users/ofirf 1/dev/management/mgmt-console/node_modules/postcss/lib/postcss.js:55:10)
    at cssnanoPlugin (/Users/ofirf 1/dev/management/mgmt-console/node_modules/cssnano/dist/index.js:137:31)
    at cssnanoMinify (eval at transform (/Users/ofirf 1/dev/management/mgmt-console/node_modules/css-minimizer-webpack-plugin/dist/minify.js:34:28), :51:33)
    at minify (/Users/ofirf 1/dev/management/mgmt-console/node_modules/css-minimizer-webpack-plugin/dist/minify.js:15:32)
    at Object.transform (/Users/ofirf 1/dev/management/mgmt-console/node_modules/css-minimizer-webpack-plugin/dist/minify.js:35:24)
    at execFunction (/Users/ofirf 1/dev/management/mgmt-console/node_modules/jest-worker/build/workers/threadChild.js:158:17)
    at execHelper (/Users/ofirf 1/dev/management/mgmt-console/node_modules/jest-worker/build/workers/threadChild.js:137:5)
    at execMethod (/Users/ofirf 1/dev/management/mgmt-console/node_modules/jest-worker/build/workers/threadChild.js:141:5)

🌍 Your Environment

Angular CLI: 12.0.3
Node: 14.15.5
Package Manager: npm 6.14.11
OS: darwin x64

Angular: 12.0.3
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, material, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.3
@angular-devkit/build-angular   12.0.3
@angular-devkit/core            12.0.3
@angular-devkit/schematics      12.0.3
@nguniversal/express-engine     11.1.1
@schematics/angular             12.0.3
rxjs                            6.6.7
typescript                      4.2.4

If it help my webpack

 npm ls webpack
mgmt-console@2.1.0 /Users/ofirf 1/dev/management/mgmt-console
└─┬ @angular-devkit/build-angular@12.0.3
  └── webpack@5.38.1 

My Node version 14.15.5

[alan-agius4]

Can you also try to remove the lock file?

rm -rf node_modules package-lock.json
npm i

if the problem persists please provide the output of npm ls postcss

[ofirrifo]

@alan-agius4
This issue still exist .
npm ls postcss

mgmt-console@2.1.0 /Users/ofirf 1/dev/management/mgmt-console
├─┬ @angular-devkit/build-angular@12.0.3
│ ├─┬ css-loader@5.2.4
│ │ └── UNMET PEER DEPENDENCY postcss@8.3.0 
│ ├─┬ css-minimizer-webpack-plugin@3.0.0
│ │ └── UNMET PEER DEPENDENCY postcss@8.3.0 
│ ├── UNMET PEER DEPENDENCY postcss@8.3.0 
│ ├─┬ postcss-preset-env@6.7.0
│ │ ├─┬ css-blank-pseudo@0.1.4
│ │ │ └── postcss@7.0.35  deduped
│ │ ├─┬ css-has-pseudo@0.10.0
│ │ │ └── postcss@7.0.35  deduped
│ │ ├─┬ css-prefers-color-scheme@3.1.1
│ │ │ └── postcss@7.0.35  deduped
│ │ ├── postcss@7.0.35  deduped
│ │ ├─┬ postcss-attribute-case-insensitive@4.0.2
│ │ │ └── postcss@7.0.35  deduped
│ │ ├─┬ postcss-color-functional-notation@2.0.1
│ │ │ └── postcss@7.0.35  deduped
│ │ ├─┬ postcss-color-gray@5.0.0
│ │ │ └── postcss@7.0.35  deduped
│ │ ├─┬ postcss-color-hex-alpha@5.0.3
│ │ │ └── postcss@7.0.35  deduped
│ │ ├─┬ postcss-color-mod-function@3.0.3
│ │ │ └── postcss@7.0.35  deduped
│ │ ├─┬ postcss-color-rebeccapurple@4.0.1
│ │ │ └── postcss@7.0.35  deduped
│ │ ├─┬ postcss-custom-media@7.0.8
│ │ │ └── postcss@7.0.35  deduped
│ │ ├─┬ postcss-custom-properties@8.0.11
│ │ │ └── postcss@7.0.35  deduped
│ │ ├─┬ postcss-custom-selectors@5.1.2
│ │ │ └── postcss@7.0.35  deduped
│ │ ├─┬ postcss-dir-pseudo-class@5.0.0
│ │ │ └── postcss@7.0.35  deduped
│ │ ├─┬ postcss-double-position-gradients@1.0.0
│ │ │ └── postcss@7.0.35  deduped
│ │ ├─┬ postcss-env-function@2.0.2
│ │ │ └── postcss@7.0.35  deduped
│ │ ├─┬ postcss-focus-visible@4.0.0
│ │ │ └── postcss@7.0.35  deduped
│ │ ├─┬ postcss-focus-within@3.0.0
│ │ │ └── postcss@7.0.35  deduped
│ │ ├─┬ postcss-font-variant@4.0.1
│ │ │ └── postcss@7.0.35  deduped
│ │ ├─┬ postcss-gap-properties@2.0.0
│ │ │ └── postcss@7.0.35  deduped
│ │ ├─┬ postcss-image-set-function@3.0.1
│ │ │ └── postcss@7.0.35  deduped
│ │ ├─┬ postcss-initial@3.0.4
│ │ │ └── postcss@7.0.35  deduped
│ │ ├─┬ postcss-lab-function@2.0.1
│ │ │ └── postcss@7.0.35  deduped
│ │ ├─┬ postcss-logical@3.0.0
│ │ │ └── postcss@7.0.35  deduped
│ │ ├─┬ postcss-media-minmax@4.0.0
│ │ │ └── postcss@7.0.35  deduped
│ │ ├─┬ postcss-nesting@7.0.1
│ │ │ └── postcss@7.0.35  deduped
│ │ ├─┬ postcss-overflow-shorthand@2.0.0
│ │ │ └── postcss@7.0.35  deduped
│ │ ├─┬ postcss-page-break@2.0.0
│ │ │ └── postcss@7.0.35  deduped
│ │ ├─┬ postcss-place@4.0.1
│ │ │ └── postcss@7.0.35  deduped
│ │ ├─┬ postcss-pseudo-class-any-link@6.0.0
│ │ │ └── postcss@7.0.35  deduped
│ │ ├─┬ postcss-replace-overflow-wrap@3.0.0
│ │ │ └── postcss@7.0.35  deduped
│ │ ├─┬ postcss-selector-matches@4.0.0
│ │ │ └── postcss@7.0.35  deduped
│ │ └─┬ postcss-selector-not@4.0.1
│ │   └── postcss@7.0.35  deduped
│ └─┬ resolve-url-loader@4.0.0
│   └── postcss@7.0.35  deduped
├─┬ stylelint@13.13.1
│ ├─┬ autoprefixer@9.8.6
│ │ └── postcss@7.0.35  deduped
│ ├── postcss@7.0.35 
│ ├─┬ postcss-less@3.1.4
│ │ └── postcss@7.0.35  deduped
│ ├─┬ postcss-safe-parser@4.0.2
│ │ └── postcss@7.0.35  deduped
│ ├─┬ postcss-sass@0.4.4
│ │ └── postcss@7.0.35  deduped
│ ├─┬ postcss-scss@2.1.1
│ │ └── postcss@7.0.35  deduped
│ └─┬ sugarss@2.0.0
│   └── postcss@7.0.35  deduped
└─┬ stylelint-config-sass-guidelines@7.1.0
  └─┬ stylelint-order@4.1.0
    ├── postcss@7.0.35  deduped
    └─┬ postcss-sorting@5.0.1
      └── postcss@7.0.35  deduped

npm ERR! peer dep missing: postcss@^8.0.0, required by postcss-import@14.0.1
npm ERR! peer dep missing: postcss@^8.1.0, required by icss-utils@5.1.0
npm ERR! peer dep missing: postcss@^8.1.0, required by postcss-modules-extract-imports@3.0.0
npm ERR! peer dep missing: postcss@^8.1.0, required by postcss-modules-local-by-default@4.0.0
npm ERR! peer dep missing: postcss@^8.1.0, required by postcss-modules-scope@3.0.0
npm ERR! peer dep missing: postcss@^8.1.0, required by postcss-modules-values@4.0.0
npm ERR! peer dep missing: postcss@^8.2.15, required by cssnano@5.0.5

[alan-agius4]

@ofirrifo, in the above output I am not seeing any dependency on postcss@8.3.0 which is strange since @angular-devkit/build-angular@12.0.3 has a direct dependency on it https://unpkg.com/browse/@angular-devkit/build-angular@12.0.3/package.json#L49

Therefore, this appears to be a NPM hoisting issue. Can you try to update NPM or use an alternate package manager?.

[Parsa-Sedigh]

I resolved this issue in my angular v12 project by installing: postcss: ^8.2.15 , as dependency.

[ofirrifo]

@alan-agius4 using yarn instead npm work for me.
Since I'm using npm in all places such as jenkins, GitHub actions etc...
I need to report a bug to npm ?

[alan-agius4]

If you are using NPM 7.16.0 and still able to reproduce this issue.

Yes, please file an issue with NPM.

[ofirrifo]

After I move the stylelint packages from dependencies to devDependencies

   "stylelint": "^13.13.1",
    "stylelint-config-sass-guidelines": "^8.0.0",
    "stylelint-config-standard": "^20.0.0"

And delete my node_moduels + package-lock.json and then execute npm install all back to work again

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}