Angular 11 to 12 upgrade causes error - Unknown error from PostCSS plugin. Your current PostCSS version is 8.2.14, but postcss-preset-env uses 7.0.35 #20903
Description
Bug Report
Affected Package
The issue is caused by package @angular/dev-kitIs this a regression?
Yes, this issue did not occur with version 11.
Description
This error happens when building the application with ng-build after an upgrade from 11-12 using
ng update @angular/core@12 @angular/cli@12Exception or Error
Unknown error from PostCSS plugin. Your current PostCSS version is 8.2.14, but postcss-preset-env uses 7.0.35. Perhaps this is the source of the error below.
⠦ Generating browser application bundles (phase: building)...(node:7648) UnhandledPromiseRejectionWarning: TypeError: MessagePort was found in message but not listed in transferList
at new Worker (internal/worker.js:170:17)
at SassWorkerImplementation.createWorker (\ClientApp\node_modules\@angular-devkit\build-angular\src\sass\sass-service.js:96:24)
at SassWorkerImplementation.render (\ClientApp\node_modules\@angular-devkit\build-angular\src\sass\sass-service.js:62:40)
at Object.loader (\ClientApp\node_modules\sass-loader\dist\index.js:46:3)
(node:7648) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch
block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:7648) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
Your Environment
Angular Version:
Upgrading from Angular 11 to 12
Anything else relevant?
This is my entire package.json
{
"name": "enterpriseApp",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"build": "ng build",
"test": "jest",
"test:watch": "jest --watch",
"lint": "ng lint",
"prettier": "pretty-quick --staged",
"prettyAll": "prettier ./src//*.ts ./src//.css ./**/.json --write",
"spell": "cspell ./src//*.html ./src//.ts ./src/**/.css",
"install:githooks": "node ./tools/gitHooks/installGitHooks.js",
"postinstall": "npm run install:githooks",
"test:ci": "jest",
"jsonserver": "json-server --watch ./JsonServerApi/index.js",
"start": "ng serve",
"tslint-check": "tslint-config-prettier-check ./tslint.json",
"stats": "webpack-bundle-analyzer dist/stats.json"
},
"private": true,
"dependencies": {
"@angular/animations": "^12.0.1",
"@angular/cdk": "^12.0.1",
"@angular/common": "^12.0.1",
"@angular/compiler": "^12.0.1",
"@angular/core": "^12.0.1",
"@angular/forms": "^12.0.1",
"@angular/localize": "^12.0.1",
"@angular/material": "^12.0.1",
"@angular/platform-browser": "^12.0.1",
"@angular/platform-browser-dynamic": "^12.0.1",
"@angular/platform-server": "^12.0.1",
"@angular/router": "^12.0.1",
"@ng-bootstrap/ng-bootstrap": "9.1.1",
"@ng-idle/core": "^10.0.0-beta.1",
"@ng-idle/keepalive": "^10.0.0-beta.1",
"@nguniversal/module-map-ngfactory-loader": "^8.2.6",
"angular-dual-listbox": "6.0.0",
"bootstrap": "4.6.0",
"cleave.js": "1.5.3",
"core-js": "^2.5.7",
"date-fns": "2.0.0-alpha.13",
"dom-autoscroller": "^2.3.4",
"error-stack-parser": "2.0.6",
"font-awesome": "^4.7.0",
"jquery": "3.4.1",
"libphonenumber-js": "1.7.44",
"lodash": "4.17.15",
"material-design-icons-iconfont": "^5.0.1",
"ng-click-outside": "^4.0.0",
"ng2-dragula": "2.1.1",
"ng2-signalr": "10.1.0",
"ngx-mat-select-search": "3.3.0",
"ngx-take-until-destroy": "^5.4.0",
"ngx-toastr": "^12.0.0",
"postcss": "7.0.35",
"rxjs": "^6.5.4",
"signalr": "^2.4.1",
"simple-keyboard": "2.3.24",
"tslib": "^2.0.0",
"typescript": "4.2.4",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.0.1",
"@angular/cli": "^12.0.1",
"@angular/compiler-cli": "12.0.1",
"@angular/language-service": "^12.0.1",
"@types/jquery": "3.3.33",
"@types/lodash": "4.14.116",
"@types/node": "^12.11.1",
"angular-in-memory-web-api": "0.9.0",
"codelyzer": "^6.0.0",
"cspell": "3.1.3",
"find-parent-dir": "0.3.0",
"jest": "24.1.0",
"jest-preset-angular": "^6.0.2",
"jest-teamcity-reporter": "0.9.0",
"ng-bullet": "^1.0.3",
"prettier": "^1.19.1",
"pretty-quick": "^2.0.1",
"ts-node": "~6.0.5",
"tslint": "~6.1.0",
"tslint-config-prettier": "^1.18.0",
"webpack-bundle-analyzer": "^4.4.0"
},
"jest": {
"preset": "jest-preset-angular",
"setupFilesAfterEnv": [
"/src/setupJest.ts"
],
"testResultsProcessor": "jest-teamcity-reporter",
"testMatch": [
"/app//*.spec.ts"
]
},
"peerDependencies": {
"popper.js": "^1.16.1"
}
}