Error: PostCSS plugin postcss-discard-comments requires PostCSS 8 in Angular 7

Dung Do Tien Aug 28 2021 215

I have a small project with Angular version 7 and today I run ng serve --o command and I get an error PostCSS plugin postcss-discard-comments requires PostCSS 8. It still working well before.

Error: PostCSS plugin postcss-discard-comments requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
    at Processor.normalize (E:\Project\StayHome\Main\Source\Admin\Source\admin\DAG.APA.CMSClient\node_modules\postcss\lib\processor.js:167:15)
    at new Processor (E:\Project\StayHome\Main\Source\Admin\Source\admin\DAG.APA.CMSClient\node_modules\postcss\lib\processor.js:56:25)
    at postcss (E:\Project\StayHome\Main\Source\Admin\Source\admin\DAG.APA.CMSClient\node_modules\postcss\lib\postcss.js:55:10)
    at cssnanoPlugin (E:\Project\StayHome\Main\Source\Admin\Source\admin\DAG.APA.CMSClient\node_modules\cssnano\dist\index.js:145:31)
    at cssnanoMinify (eval at transform (E:\Project\StayHome\Main\Source\Admin\Source\admin\DAG.APA.CMSClient\node_modules\css-minimizer-webpack-plugin\dist\minify.js:34:28), <anonymous>:51:33)
    at minify (E:\Project\StayHome\Main\Source\Admin\Source\admin\DAG.APA.CMSClient\node_modules\css-minimizer-webpack-plugin\dist\minify.js:15:32)
    at Object.transform (E:\Project\StayHome\Main\Source\Admin\Source\admin\DAG.APA.CMSClient\node_modules\css-minimizer-webpack-plugin\dist\minify.js:35:24)
    at execFunction (E:\Project\StayHome\Main\Source\Admin\Source\admin\DAG.APA.CMSClient\node_modules\jest-worker\build\workers\threadChild.js:158:17)
    at execHelper (E:\Project\StayHome\Main\Source\Admin\Source\admin\DAG.APA.CMSClient\node_modules\jest-worker\build\workers\threadChild.js:137:5)
    at execMethod (E:\Project\StayHome\Main\Source\Admin\Source\admin\DAG.APA.CMSClient\node_modules\jest-worker\build\workers\threadChild.js:141:5)

I tried to delete node_modules folder and run npm install command but it still does not work for me.

And below is my project environment.

Angular CLI: 7.3.9
Node: 14.17.5
OS: win32 x64
Angular: 7.2.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.9
@angular-devkit/build-angular     0.13.8
@angular-devkit/build-optimizer   0.13.8
@angular-devkit/build-webpack     0.13.8
@angular-devkit/core              7.3.9
@angular-devkit/schematics        7.3.9
@angular/cdk                      7.3.3
@angular/cli                      7.3.9
@angular/material                 7.3.3
@ngtools/webpack                  7.3.8
@schematics/angular               7.3.9
@schematics/update                0.13.9
rxjs                              6.4.0
typescript                        3.2.4
webpack                           4.29.0

Thanks for any suggestions.

Have 4 answer(s) found.
  • M

    Minh Yến Sep 01 2021

    Run command below:

    npm i postcss -D

    And it fixed for me.

  • A

    Anand Pissey Aug 28 2021

    You can try to delete package-lock.json file first and, open a terminal window then execute the below commands one by one.

    npm i --save autoprefixer@^10.0.2
npm i --save postcss@8.1.7 
npm i --save postcss-loader@4.0.4
  • T

    Tuấn Dương Anh Aug 28 2021

    Downgrade your autoprefixer to version 9, use

    "autoprefixer": "^9.0.0"

    in your dev dependencies of package.json.

  • J

    Jide Aug 28 2021

    Change your package.json config as below:

     "dependencies": {
    "autoprefixer": "^10.0.2",
    "postcss": "^8.1.7",
    "postcss-loader": "^4.0.4"
}

    And try to delete node_modules folder and run npm install. 

Related Q&A May You Like

  1. ReferenceError: $ is not defined in Angular version 11
  2. 'rxjs/Observable' has no exported member 'Observable' in Angular
  3. Error: Could not find any Python installation to use in Angular 11
  4. You seem to not be depending on "@angular/core" and/or "rxjs" in Angular
  5. Error TS1086: An accessor cannot be declared in an ambient context in Angular
  6. ENOENT: no such file or directory, lstat coreui-icons.css in Angular
  7. Module not found: Error: Can't resolve '@angular/localize/init' in Angular
  8. Error: Cannot find module '@angular-devkit/core' in Angular 9
  9. TypeError: Cannot read property 'props' of undefined in ReactJS
  10. Can't bind to 'ngModel' since it isn't a known property of 'input' in Angular
  11. Angular error: Node Sass does not yet support your current environment
  12. Angular 9 throw error "ng: command not found" in MacOS
  13. Angular: No value accessor for form control with unspecified name attribute
  14. Angular : If ngModel is used within a form tag, either the name attribute must be set
  15. Angular: Can't bind to 'formControl' since it isn't a known property of 'input'
Leave An Answer
* NOTE: You need Login before leave an answer

* Type maximum 2000 characters.

* All comments have to wait approved before display.

* Please polite comment and respect questions and answers of others.

Most Quizs Popular

Start Test

Javascript - Functions

Start Test

Asp.Net Core - Exam test 01

Start Test

Asp.Net Core - Exam test 02

Start Test

C# - Level Beginner

Popular Tips

This site uses cookies so that we can remember you and understand how you interact with our website. This allows us to improve and customize your browsing experience. See our Cookies Policy.
X Close