angular-cli: Migration angular 11 -> 12 causing Unknown error from PostCSS plugin

I have migrated from Angular 11 to Angular 12. I use Angular Material.

After the migration a ‘ng serve’ generates many errors:

 Generating browser application bundles (phase: building)...Unknown error from PostCSS plugin. Your current PostCSS version is 8.3.0, but postcss-preset-env uses 7.0.35. Perhaps this is the source of the error below.
Unknown error from PostCSS plugin. Your current PostCSS version is 8.3.0, but postcss-preset-env uses 7.0.35. Perhaps this is the source of the error below.
Unknown error from PostCSS plugin. Your current PostCSS version is 8.3.0, but postcss-preset-env uses 7.0.35. Perhaps this is the source of the error below.
Unknown error from PostCSS plugin. Your current PostCSS version is 8.3.0, but postcss-preset-env uses 7.0.35. Perhaps this is the source of the error below.
etc......

Secondly additional errors are reported:

./src/app/<dir>/<component>.scss - Error: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
BrowserslistError: Unknown version 81 of android
    at Function.select (C:\tfs\platform-ui\client\node_modules\browserslist\index.js:1132:17)
    at C:\tfs\platform-ui\client\node_modules\browserslist\index.js:336:33
    at Array.reduce (<anonymous>)

I see in yarn.lock that “@angular-devkit/build-angular @12.0.2”: has dependencies: postcss “8.3.0” postcss-import “14.0.1” postcss-loader “5.2.0” postcss-preset-env “6.7.0”

I have installed the latest node: v14.17.0 (mentioned in https://github.com/angular/angular-cli/issues/20903) I have deleted the node_modules and downloaded all package.

I have no clue what is wrong. Anyone any idea?

Angular.json: { “$schema”: “./node_modules/@angular/cli/lib/config/schema.json”, “version”: 1, “newProjectRoot”: “projects”, “projects”: { “platform-ui”: { “projectType”: “application”, “schematics”: { “@schematics/angular:component”: { “style”: “scss” }, “@schematics/angular:application”: { “strict”: true } }, “root”: “”, “sourceRoot”: “src”, “prefix”: “app”, “architect”: { “build”: { “builder”: “@angular-devkit/build-angular:browser”, “options”: { “outputPath”: “dist”, “index”: “src/index.html”, “main”: “src/main.ts”, “polyfills”: “src/polyfills.ts”, “tsConfig”: “src/tsconfig.app.json”, “stylePreprocessorOptions”: { “includePaths”: [ “src/assets/style” ] }, “assets”: [ “src/assets”, “src/favicon.ico” ], “styles”: [ “src/styles.scss”, “node_modules/@fortawesome/fontawesome-free/css/all.css”, “node_modules/ngx-toastr/toastr.css” ], “scripts”: [], “vendorChunk”: true, “extractLicenses”: false, “buildOptimizer”: false, “sourceMap”: true, “optimization”: false, “namedChunks”: true }, “configurations”: { “production”: { “budgets”: [ { “type”: “anyComponentStyle”, “maximumWarning”: “6kb” } ], “optimization”: true, “outputHashing”: “all”, “sourceMap”: false, “namedChunks”: false, “extractLicenses”: true, “vendorChunk”: false, “buildOptimizer”: true, “fileReplacements”: [ { “replace”: “src/environments/environment.ts”, “with”: “src/environments/environment.prod.ts” } ] } } }, “serve”: { “builder”: “@angular-devkit/build-angular:dev-server”, “options”: { “browserTarget”: “platform-ui:build” }, “configurations”: { “production”: { “browserTarget”: “platform-ui:build:production” } } }, “extract-i18n”: { “builder”: “@angular-devkit/build-angular:extract-i18n”, “options”: { “browserTarget”: “platform-ui:build” } }, “test”: { “builder”: “@angular-devkit/build-angular:karma”, “options”: { “main”: “src/test.ts”, “karmaConfig”: “./karma.conf.js”, “polyfills”: “src/polyfills.ts”, “tsConfig”: “src/tsconfig.spec.json”, “scripts”: [], “styles”: [ “src/styles.scss” ], “stylePreprocessorOptions”: { “includePaths”: [ “src/styles”, “src/assets/style”, “src/assets/style/font”, “src/assets/style/overrides”, “src/assets/style/mixins”, “src/assets/style/variables” ] }, “assets”: [ “src/assets”, “src/favicon.ico” ] } }, “lint”: { “builder”: “@angular-devkit/build-angular:tslint”, “options”: { “tsConfig”: [ “src/tsconfig.app.json”, “src/tsconfig.spec.json” ], “exclude”: [] } } } }, “platform-ui-e2e”: { “root”: “e2e”, “sourceRoot”: “e2e”, “projectType”: “application”, “architect”: { “e2e”: { “builder”: “@angular-devkit/build-angular:protractor”, “options”: { “protractorConfig”: “./protractor.conf.js”, “devServerTarget”: “platform-ui:serve” } }, “lint”: { “builder”: “@angular-devkit/build-angular:tslint”, “options”: { “tsConfig”: [ “e2e/tsconfig.e2e.json” ], “exclude”: [] } } } } }, “defaultProject”: “platform-ui”, “schematics”: { “@schematics/angular:component”: { “prefix”: “app”, “style”: “scss”, “styleext”: “scss” }, “@schematics/angular:directive”: { “prefix”: “app” } }, “cli”: { “analytics”: “e7857621-5b3e-4805-8f2d-f407b5402ed0” } }

package.json: { “name”: “ui-client”, “version”: “1.0.0”, “scripts”: { “ng”: “ng”, “start”: “ng serve”, “build”: “node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build”, “test”: “node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng test”, “lint”: “ng lint”, “e2e”: “ng e2e”, “bundle-report”: “webpack-bundle-analyzer dist/stats.json” }, “private”: true, “dependencies”: { “@angular/animations”: “12.0.2”, “@angular/cdk”: “12.0.2”, “@angular/common”: “12.0.2”, “@angular/compiler”: “12.0.2”, “@angular/core”: “12.0.2”, “@angular/forms”: “12.0.2”, “@angular/material”: “12.0.2”, “@angular/platform-browser”: “12.0.2”, “@angular/platform-browser-dynamic”: “12.0.2”, “@angular/platform-server”: “12.0.2”, “@angular/router”: “12.0.2”, “@fortawesome/fontawesome-free”: “5.15.3”, “@turf/turf”: “5.1.6”, “ag-grid-angular”: “25.2.0”, “ag-grid-community”: “25.2.1”, “angular-pipes”: “10.0.0”, “aws-sdk”: “2.907.0”, “classlist.js”: “^1.1.20150312”, “js-yaml”: “3.14.1”, “jsts”: “2.0.8”, “lodash-es”: “4.17.21”, “moment”: “2.29.1”, “ngx-clipboard”: “14.0.1”, “ngx-toastr”: “13.2.1”, “normalize-scss”: “^7.0.0”, “rxjs”: “6.6.7”, “tslib”: “^2.0.0”, “vkbeautify”: “^0.99.3”, “web-animations-js”: “^2.3.2”, “zone.js”: “~0.11.4” }, “devDependencies”: { “@angular-devkit/build-angular”: “12.0.2”, “@angular/cli”: “12.0.2”, “@angular/compiler-cli”: “12.0.2”, “@angular/language-service”: “12.0.2”, “@types/core-js”: “2.5.4”, “@types/jasmine”: “3.7.4”, “@types/js-yaml”: “3.12.1”, “@types/lodash”: “4.14.169”, “@types/node”: “15.3.0”, “@types/vkbeautify”: “0.99.2”, “codelyzer”: “6.0.2”, “jasmine-core”: “3.7.1”, “jasmine-spec-reporter”: “7.0.0”, “karma”: “6.3.2”, “karma-chrome-launcher”: “~3.1.0”, “karma-coverage-istanbul-reporter”: “~3.0.2”, “karma-htmlfile-reporter”: “0.3.8”, “karma-jasmine”: “~4.0.0”, “karma-jasmine-html-reporter”: “1.6.0”, “karma-parallel-2”: “0.3.2”, “license-checker”: “25.0.1”, “protractor”: “~7.0.0”, “ts-node”: “^8.10.2”, “tslint”: “6.1.3”, “typescript”: “4.2.4”, “webpack-bundle-analyzer”: “4.4.2” } }

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 9
Comments: 30 (1 by maintainers)

Most upvoted comments

The issue seems to be related to the file .browserslistrc, renamed from browserlist during the upgrade migration. I resolved this issue by creating a new angular app, but only for the purposes of creating the default .browserslistrc file, and then copied that file to my upgraded app. For some more info on .browserlistrc, see https://github.com/browserslist/browserslist#queries

+23

phillwatson on Jul 13, 2021

Look like you might need to delete the lock file.

rm -rf node_modules package-lock.json

alan-agius4 on May 27, 2021

We’re getting this as well. I’ve tried deleting node_models and package.lock to no avail.

It’s also only failing for one of our apps in a multi app build. the style.scss file in the failing app is identical to those in other apps.

I can’t find any dependencies out side of angular.

$ npm ls postcss-preset-env
@.........
└─┬ @angular-devkit/build-angular@12.0.3
  └── postcss-preset-env@6.7.0

$ npm ls postcss
@.........
└─┬ @angular-devkit/build-angular@12.0.3
  ├─┬ css-loader@5.2.4
  │ └── postcss@8.3.0  deduped
  ├─┬ css-minimizer-webpack-plugin@3.0.0
  │ └── postcss@8.3.0  deduped
  ├── postcss@8.3.0 
  ├─┬ postcss-preset-env@6.7.0
  │ ├─┬ autoprefixer@9.8.6
  │ │ └── postcss@7.0.35 
  │ ├─┬ css-blank-pseudo@0.1.4
  │ │ └── postcss@7.0.35 
  │ ├─┬ css-has-pseudo@0.10.0
  │ │ └── postcss@7.0.35 
  │ ├─┬ css-prefers-color-scheme@3.1.1
  │ │ └── postcss@7.0.35 
  │ ├── postcss@7.0.35 
  │ ├─┬ postcss-attribute-case-insensitive@4.0.2
  │ │ └── postcss@7.0.35 
  │ ├─┬ postcss-color-functional-notation@2.0.1
  │ │ └── postcss@7.0.35 
  │ ├─┬ postcss-color-gray@5.0.0
  │ │ └── postcss@7.0.35 
  │ ├─┬ postcss-color-hex-alpha@5.0.3
  │ │ └── postcss@7.0.35 
  │ ├─┬ postcss-color-mod-function@3.0.3
  │ │ └── postcss@7.0.35 
  │ ├─┬ postcss-color-rebeccapurple@4.0.1
  │ │ └── postcss@7.0.35 
  │ ├─┬ postcss-custom-media@7.0.8
  │ │ └── postcss@7.0.35 
  │ ├─┬ postcss-custom-properties@8.0.11
  │ │ └── postcss@7.0.35 
  │ ├─┬ postcss-custom-selectors@5.1.2
  │ │ └── postcss@7.0.35 
  │ ├─┬ postcss-dir-pseudo-class@5.0.0
  │ │ └── postcss@7.0.35 
  │ ├─┬ postcss-double-position-gradients@1.0.0
  │ │ └── postcss@7.0.35 
  │ ├─┬ postcss-env-function@2.0.2
  │ │ └── postcss@7.0.35 
  │ ├─┬ postcss-focus-visible@4.0.0
  │ │ └── postcss@7.0.35 
  │ ├─┬ postcss-focus-within@3.0.0
  │ │ └── postcss@7.0.35 
  │ ├─┬ postcss-font-variant@4.0.1
  │ │ └── postcss@7.0.35 
  │ ├─┬ postcss-gap-properties@2.0.0
  │ │ └── postcss@7.0.35 
  │ ├─┬ postcss-image-set-function@3.0.1
  │ │ └── postcss@7.0.35 
  │ ├─┬ postcss-initial@3.0.4
  │ │ └── postcss@7.0.35 
  │ ├─┬ postcss-lab-function@2.0.1
  │ │ └── postcss@7.0.35 
  │ ├─┬ postcss-logical@3.0.0
  │ │ └── postcss@7.0.35 
  │ ├─┬ postcss-media-minmax@4.0.0
  │ │ └── postcss@7.0.35 
  │ ├─┬ postcss-nesting@7.0.1
  │ │ └── postcss@7.0.35 
  │ ├─┬ postcss-overflow-shorthand@2.0.0
  │ │ └── postcss@7.0.35 
  │ ├─┬ postcss-page-break@2.0.0
  │ │ └── postcss@7.0.35 
  │ ├─┬ postcss-place@4.0.1
  │ │ └── postcss@7.0.35 
  │ ├─┬ postcss-pseudo-class-any-link@6.0.0
  │ │ └── postcss@7.0.35 
  │ ├─┬ postcss-replace-overflow-wrap@3.0.0
  │ │ └── postcss@7.0.35 
  │ ├─┬ postcss-selector-matches@4.0.0
  │ │ └── postcss@7.0.35 
  │ └─┬ postcss-selector-not@4.0.1
  │   └── postcss@7.0.35 
  └─┬ resolve-url-loader@4.0.0
    └── postcss@7.0.35

The start of the build shows this:

Unknown error from PostCSS plugin. Your current PostCSS version is 8.3.0, but postcss-preset-env uses 7.0.35. Perhaps this is the source of the error below.

And then later fails with this.

......./src/styles.scss - Error: 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):
TypeError: Cannot read property 'raws' of undefined
    at Parser.space (....../node_modules/postcss-values-parser/lib/parser.js:387:25)
    at Parser.parseTokens (....../node_modules/postcss-values-parser/lib/parser.js:223:14)
    at Parser.loop (....../node_modules/postcss-values-parser/lib/parser.js:132:12)
    at Parser.parse (....../node_modules/postcss-values-parser/lib/parser.js:51:17)
    at parse (....../node_modules/postcss-custom-properties/index.cjs.js:47:30)
    at ....../node_modules/postcss-custom-properties/index.cjs.js:73:42
    at Array.forEach (<anonymous>)
    at ....../node_modules/postcss-custom-properties/index.cjs.js:69:26
    at Array.forEach (<anonymous>)
    at getCustomPropertiesFromRoot (....../node_modules/postcss-custom-properties/index.cjs.js:65:22)
    at Object.syncTransform [as plugin] (....../node_modules/postcss-custom-properties/index.cjs.js:519:30)
    at ....../node_modules/postcss-preset-env/index.js:443:97
    at async LazyResult.runAsync (....../node_modules/postcss/lib/lazy-result.js:388:11)
    at async Object.loader (....../node_modules/postcss-loader/dist/index.js:87:14)
    at processResult (....../node_modules/webpack/lib/NormalModule.js:703:19)
    at ....../node_modules/webpack/lib/NormalModule.js:809:5
    at ....../node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at ....../node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (....../node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (....../node_modules/postcss-loader/dist/index.js:96:7)

pietschy on Jun 5, 2021

The issue seems to be related to the file .browserslistrc, renamed from browserlist during the upgrade migration. I resolved this issue by creating a new angular app, but only for the purposes of creating the default .browserslistrc file, and then copied that file to my upgraded app. For some more info on .browserlistrc, see https://github.com/browserslist/browserslist#queries

This worked for me. I had a similiar erorr where I’d get an error due to Kendo themes crashing the build with syntax error. Using ng new and ripping that browserlistrc file completely worked instantly.

perhellstream on Aug 16, 2021

This is what helped me:

1st repo - deleted yarn.lock and node_modules, yarn install and it was good to go

2nd repo - as above, + had to point angular.json to a sass file instead of css (for angular-notifier lib). Weird as hell but it worked.

Brachacz on Jun 6, 2021

Worked for me also.

This is the default .browserlistrc for v12 just FYI

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# For the full list of supported browsers by the Angular framework, please see:
# https://angular.io/guide/browser-support

# You can see what browsers were selected by your queries by running:
#   npx browserslist

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

tariknz on Oct 1, 2021

Updating the .browserslistrc file content to the new format worked for me also, as long as I exclude IE 11. Opting in to IE 11 support causes the PostCSS issue to return during the build. I only have autoprefixer installed as a dependency of the @angular-devkit

> npm ls autoprefixer
+-- @angular-devkit/build-angular@12.2.2
| `-- postcss-preset-env@6.7.0
|   `-- autoprefixer@9.8.6

benb-empactis on Aug 24, 2021

Same issue for me. Tried deleting package-lock.json and node_modules, also tried forcibly installing postcss, postcss-cli, postcss-preset-env and autoprefixer as dependencies at earlier versions, nothing seems to help. No choice but to revert to Angular 11 for now.

wwarby on Jul 2, 2021

I completely rebuild package.json and yarn.lock from scratch. The problem is resolved. Thanks for the support.

Hi, how did you manage to resolve this? I tried everything. Deleted yarn.lack and node_modules. Nothing works. I even made a dependency on postcss@7 but, guess what - same error!!! Please, help.

mrtndimitrov on May 31, 2021

I completely rebuild package.json and yarn.lock from scratch. The problem is resolved. Thanks for the support.

arjanlemmers on May 27, 2021