Angular 12 update issue: Unknown error from PostCSS plugin

Question

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.

Colorant

Did you try cleaning your node_modules folder and re-installing the dependencies? – Hesperian

I am getting this same error. I've tried a fresh yarn install several times with no luck. Could there be a compatibility issue with a third party package? I am not sure how to find the package causing the issue. – Pliers

I submitted a github issue for this github.com/angular/angular/issues/42234 – Pliers

Answer 1

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.

Madness

Answer 2

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.

Rede

Answer 3

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.

Pliers

Answer 4

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

Vilmavim

Answer 5

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.

Thornberry