Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
arjanlemmers opened this issue May 27, 2021 · 30 comments
Closed
Labels
needs: more info Reporter must clarify the issue

Comments

@arjanlemmers
Copy link

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/[email protected]": 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 #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"
}
}

@JoostK JoostK transferred this issue from angular/angular May 27, 2021
@alan-agius4
Copy link
Collaborator

Look like you might need to delete the lock file.

rm -rf node_modules package-lock.json

@alan-agius4 alan-agius4 added the needs: more info Reporter must clarify the issue label May 27, 2021
@arjanlemmers
Copy link
Author

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

@alan-agius4
Copy link
Collaborator

How does it break yarn?

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

@arjanlemmers
Copy link
Author

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

@mrtndimitrov
Copy link

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
Copy link
Author

arjanlemmers commented May 31, 2021

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
Copy link

Brachacz commented Jun 2, 2021

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
Copy link

pietschy commented Jun 5, 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/[email protected]
  └── [email protected] 
$ npm ls postcss
@.........
└─┬ @angular-devkit/[email protected]
  ├─┬ [email protected]
  │ └── [email protected]  deduped
  ├─┬ [email protected]
  │ └── [email protected]  deduped
  ├── [email protected] 
  ├─┬ [email protected]
  │ ├─┬ [email protected]
  │ │ └── [email protected] 
  │ ├─┬ [email protected]
  │ │ └── [email protected] 
  │ ├─┬ [email protected]
  │ │ └── [email protected] 
  │ ├─┬ [email protected]
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected]
  │ │ └── [email protected] 
  │ ├─┬ [email protected]
  │ │ └── [email protected] 
  │ ├─┬ [email protected]
  │ │ └── [email protected] 
  │ ├─┬ [email protected]
  │ │ └── [email protected] 
  │ ├─┬ [email protected]
  │ │ └── [email protected] 
  │ ├─┬ [email protected]
  │ │ └── [email protected] 
  │ ├─┬ [email protected]
  │ │ └── [email protected] 
  │ ├─┬ [email protected]
  │ │ └── [email protected] 
  │ ├─┬ [email protected]
  │ │ └── [email protected] 
  │ ├─┬ [email protected]
  │ │ └── [email protected] 
  │ ├─┬ [email protected]
  │ │ └── [email protected] 
  │ ├─┬ [email protected]
  │ │ └── [email protected] 
  │ ├─┬ [email protected]
  │ │ └── [email protected] 
  │ ├─┬ [email protected]
  │ │ └── [email protected] 
  │ ├─┬ [email protected]
  │ │ └── [email protected] 
  │ ├─┬ [email protected]
  │ │ └── [email protected] 
  │ ├─┬ [email protected]
  │ │ └── [email protected] 
  │ ├─┬ [email protected]
  │ │ └── [email protected] 
  │ ├─┬ [email protected]
  │ │ └── [email protected] 
  │ ├─┬ [email protected]
  │ │ └── [email protected] 
  │ ├─┬ [email protected]
  │ │ └── [email protected] 
  │ ├─┬ [email protected]
  │ │ └── [email protected] 
  │ ├─┬ [email protected]
  │ │ └── [email protected] 
  │ ├─┬ [email protected]
  │ │ └── [email protected] 
  │ ├─┬ [email protected]
  │ │ └── [email protected] 
  │ ├─┬ [email protected]
  │ │ └── [email protected] 
  │ ├─┬ [email protected]
  │ │ └── [email protected] 
  │ ├─┬ [email protected]
  │ │ └── [email protected] 
  │ └─┬ [email protected]
  │   └── [email protected] 
  └─┬ [email protected]
    └── [email protected] 

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
Copy link

Brachacz commented Jun 6, 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.

@mageshwaran-p
Copy link

mageshwaran-p commented Jun 21, 2021

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
Copy link

yehorlitsov commented Jun 25, 2021

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
Copy link

@yehorlitsov me too

@wwarby
Copy link

wwarby commented Jul 2, 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.

@phillwatson
Copy link

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
Copy link

alexhelsana commented Jul 13, 2021

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
Copy link

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: #21055

@thutinavaneethreddy
Copy link

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

npm install [email protected] --save-dev

@perhellstream
Copy link

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
Copy link

wwarby commented Aug 18, 2021

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

@rmegal
Copy link

rmegal commented Aug 20, 2021

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
Copy link

aspergillusOryzae commented Aug 23, 2021

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
Copy link

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/[email protected]
| `-- [email protected]
|   `-- [email protected]

@philipobriensgs
Copy link

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
Copy link

akaustel commented Sep 1, 2021

The issue seems to be related to the file .browserslistrc

This solved my problem, thanks @phillwatson @chaintip

@freshekt
Copy link

npm i browserslist@latest

@FTello31
Copy link

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
Copy link
Contributor

tariknz commented Oct 1, 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.

@andreyinkin
Copy link

npm i browserslist@latest

This solution worked for me. Thanks @freshekt

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Nov 7, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
needs: more info Reporter must clarify the issue
Projects
None yet
Development

No branches or pull requests