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

[arjanlemmers]

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" } }

[alan-agius4]

Look like you might need to delete the lock file.

rm -rf node_modules package-lock.json

[arjanlemmers]

I use yarn. I do not have package-lock.json. Removing yarn.lock breaks yarn.

[alan-agius4]

How does it break yarn?

From the errors is looks like the yarn.lock file is unmaintained and needs to be regenerated.

[arjanlemmers]

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

[mrtndimitrov]

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.

[arjanlemmers]

I generated a new angular project and copied the package.json and yarn.lock into my existing project. Secondly i added one by one the missing packages, required by my application. git-diff helps to shows the delta between original and new package.json to add the missing packages.

[Brachacz]

I generated a new angular project and copied the package.json and yarn.lock into my existing project. Secondly i added one by one the missing packages, required by my application. git-diff helps to shows the delta between original and new package.json to add the missing packages.

Hi, are you able to provide the delta here? There's nothing in my original package.json, that would be missing from new project's package.json.

[pietschy]

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)

[Brachacz]

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.

[mageshwaran-p]

Hi, Migrated from angular 11 to 12 recently. Fixed few of the broken css files. But then got caught with this same error. Tried everything suggested here(Deleted package-lock.json, node_modules) , Nothing worked. Can anyone help?

[yehorlitsov]

I have a bit similar issue, i got

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

on each of my scss files, after updating to angular 12

[brendowalmeida]

@YehorLitsov me too

[wwarby]

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.

[phillwatson]

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

[alexhelsana]

I have the same issue as @pietschy and .browserslistrc has nothing to do with it. Deleting yarn.lock, and node_modules and reinstall didn’t helped as well. Did you managed to resolve it @pietschy?

EDIT: Fixed it for me! I had to comment out part by part of my scss, until I found the lines that caused the issue. It was a weird @each loop that created css variables with a value of null, but I actually didn’t found out the root issue.

[pietschy]

Hi @alexhelsana, my issue was also a scss compile problem, one of the material functions was returning null in some cases (but I never got to the bottom of it) but was able to work around it. I did raise another issue for it here: https://github.com/angular/angular-cli/issues/21055

[thutinavaneethreddy]

I was able to fix this issue by downgrading autoprefixer version to 9.0.0

npm install autoprefixer@9.0.0 --save-dev

[perhellstream]

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.

[wwarby]

Yep, I can confirm the .browserlistrc fix from @phillwatson corrects the problem in my case to. Thanks @phillwatson!

[rmegal]

Same for me: Updating the .browserlistrc file solved the problem. I had tried a bunch of other things, some of which are talked about here, before finding this discussion. Thanks @phillwatson!

[aspergillusOryzae]

While creating a .browserlistrc file solved the issue during runtime, building still fails for me. I didn't have autoprefixer as a dependency before, and adding it didn't make a difference. I removed both node_modules and my yarn.lock file as well.

[benb-empactis]

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

[philipobriensgs]

Adding .browserslistrc also worked for me. I also had to rename browserslist so it wouldn't get picked up during ng serve. Thanks @phillwatson

[akaustel]

The issue seems to be related to the file .browserslistrc

This solved my problem, thanks @phillwatson @chaintip

[freshekt]

npm i browserslist@latest

[FTello31]

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 solved my problem, Thanks @phillwatson

[tariknz]

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.

[andreyinkin]

npm i browserslist@latest

This solution worked for me. Thanks @freshekt

[angular-automatic-lock-bot[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.}