postcss-loader throws error after Nuxt v2.16 update

[phivk]

Environment

System:
OS: Linux 5.10 Ubuntu 20.04.4 LTS (Focal Fossa)
CPU: (8) x64 Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz
Memory: 8.00 GB / 12.34 GB
Container: Yes
Shell: 5.0.17 - /bin/bash
Binaries:
Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
Yarn: 1.22.19 - ~/.yarn/bin/yarn
npm: 8.19.2 - ~/.nvm/versions/node/v16.16.0/bin/npm
npmPackages:
@nuxt/content: ^1.15.1 => 1.15.1
nuxt: ^2.16.0 => 2.16.0

Reproduction

beeldengeluid/labs.beeldengeluid.nl#459

Describe the bug

After bumping nuxt from 2.15.8 to 2.16.0, nuxt and nuxt generate throw the following error:

 ERROR  in ./layouts/error.vue?vue&type=style&index=0&id=d5ea9138&scoped=true&lang=css&                                                                                                friendly-errors 16:08:53

Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):                                                                                                                  friendly-errors 16:08:53
Error: PostCSS plugin postcss-import requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
    at Processor.normalize (/home/phivk/projects/labs-website/dev/labs.beeldengeluid.nl/node_modules/postcss/lib/processor.js:167:15)
    at new Processor (/home/phivk/projects/labs-website/dev/labs.beeldengeluid.nl/node_modules/postcss/lib/processor.js:56:25)
    at postcss (/home/phivk/projects/labs-website/dev/labs.beeldengeluid.nl/node_modules/postcss/lib/postcss.js:55:10)
    at Object.loader (/home/phivk/projects/labs-website/dev/labs.beeldengeluid.nl/node_modules/postcss-loader/dist/index.js:95:20)
                                                                                                                                                                                       friendly-errors 16:08:53
 @ ./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??ref--3-oneOf-1-2!./node_modules/vue-loader/lib??vue-loader-options!./layouts/error.vue?vue&type=style&index=0&id=d5ea9138&scoped=true&lang=css& 4:14-331 15:3-20:5 16:22-339
 @ ./layouts/error.vue?vue&type=style&index=0&id=d5ea9138&scoped=true&lang=css&
 @ ./layouts/error.vue
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

Additional context

I've tried following this migration guide:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users#nuxtjs
and added @nuxt/postcss8 according to
https://github.com/nuxt/postcss8#usage

but Nuxt v2.16 is clever and ignores explicit @nuxt/postcss8 references, because it knows it is already used as part of nuxt:

ℹ @nuxt/postcss8 is disabled since nuxt has upgraded to postcss v8.

Could it be that postcss-loader or postcss-import are still using an earlier version of postcss?
How could I fix that?

Logs

No response

[volk234]

i fixed it with:

npm i -D postcss

[phivk]

thanks @volk234 I did that and it resolved the postcss error.

Next I ran into an "TextEncoder is not defined" error thrown by axios, which seems to have been recently fixed:
axios/axios#5530
I resolved this with:
npm update axios

This got me thinking and I tried running
npm update postcss
to update indirect postcss dependencies in package-lock.json
and
npm uninstall postcss
to remove postcss from devDependencies.
My project still builds correctly afterwards via npm run dev and npm run generate

Closing this issue, as it seems related to the specific state of my project's package-lock.json.

[katerlouis]

Why do we have to install postcss manually in 2.16.0?

[ckhatton]

Exactly, the mind boggles 🤯

[Raven2049]

I start to use pnpm，my project throws this error too.(in my PC is totally no error，but generate in server ,so weird)
I add postcss8 in packages.json，resolved!