Hi after I ran "ng update @angular/core@12 @angular/cli@12" to upgrade from 11 to 12, and then "ng serve app" I keep getting the following 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."
What's my problem? No PostCSS in package.json. I don't know about it. Thanks in advance.
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.
Update .browserlistrc to this:
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.
This issue will occur if you have an installed version of node that is older than 12.17 as noted in this github issue. https://github.com/angular/angular-cli/issues/20863
Upgrading to node.js version 12.20 or later should resolve the issue.
Note that after I did this, I also had to regenerate my yarn.lock file.
Try removing the node_modules folder and package-lock.json file and then run the following command
yarn install
OR
Try to run the following commands
yarn remove bootstrap
yarn add bootstrap
Following to answer from @PAR, I did create a new project to verify the .browserslistrc file, the contents were the same in the updated NG12 project, except the file was under src folder, so I just have to move it out in the root and the project started working just fine again.