Throws "Error: PostCSS plugin postcss-import requires PostCSS 8" even when PostCSS 8 is installed #435

ChildishGiant · 2020-10-22T14:12:31Z

PS F:\code\cloverleaf\web> npm view postcss version
8.1.2
PS F:\code\cloverleaf\web> npm run build

> [email protected] build F:\code\cloverleaf\web
> cross-env NODE_ENV=production node --no-deprecation config/webpack/config.js

Translations up to date
Processing translations
Finished processing translations
Build completed in 8.733s

assets by status 118 KiB [cached] 1 asset
runtime modules 1.1 KiB 8 modules
orphan modules 1.07 KiB [orphan] 1 module
modules by path ./node_modules/ 211 KiB 26 modules
modules by path ./src/ 20.8 KiB
  ./src/main.js 20.7 KiB [built] [code generated]
  ./src/style.scss 39 bytes [built] [code generated] [1 error]
modules by path ./data/*.json 2.64 KiB
  ./data/logos.json 1.53 KiB [built] [code generated]
  ./data/themes.json 1.11 KiB [built] [code generated]
./langs/langs.json 159 bytes [built] [code generated]
crypto (ignored) 15 bytes [optional] [built] [code generated]

ERROR in ./src/style.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
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 (F:\code\cloverleaf\web\node_modules\postcss-loader\node_modules\postcss\lib\processor.js:153:15)
    at new Processor (F:\code\cloverleaf\web\node_modules\postcss-loader\node_modules\postcss\lib\processor.js:56:25)
    at postcss (F:\code\cloverleaf\web\node_modules\postcss-loader\node_modules\postcss\lib\postcss.js:55:10)
    at F:\code\cloverleaf\web\node_modules\postcss-loader\src\index.js:140:12
    at processResult (F:\code\cloverleaf\web\node_modules\webpack\lib\NormalModule.js:576:19)
    at F:\code\cloverleaf\web\node_modules\webpack\lib\NormalModule.js:669:5
    at F:\code\cloverleaf\web\node_modules\loader-runner\lib\LoaderRunner.js:397:11
    at F:\code\cloverleaf\web\node_modules\loader-runner\lib\LoaderRunner.js:252:18
    at context.callback (F:\code\cloverleaf\web\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at F:\code\cloverleaf\web\node_modules\postcss-loader\src\index.js:208:9
 @ ./src/main.js 19:0-22

1 ERROR in child compilations
webpack 5.1.3 compiled with 2 errors in 8733 ms

The text was updated successfully, but these errors were encountered:

RyanZim · 2020-10-22T14:43:18Z

Is postcss-loader up to date?

ChildishGiant · 2020-10-22T15:11:30Z

Yep, 4.0.4

www-chique · 2020-10-25T00:21:15Z

Got the same error. Everything else seems up-to-date.
Following the examples from this article: https://codechips.me/svelte-postcss-and-typescript-with-svite/
I gave a little bit of context as I am clueless and maybe the error isn't even related to this package. If you need more information, I will try to provide.

RyanZim · 2020-10-27T13:26:03Z

What's the output of npm ls from within the project directory?

songololo · 2020-10-29T12:50:34Z

Same issues here.

Output from npm ls:

├── @fortawesome/[email protected]
├── @fortawesome/[email protected]
├── @fortawesome/[email protected]
├── @vue/[email protected]
├── @vue/[email protected]
├── @vue/[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]

RyanZim · 2020-10-30T12:47:13Z

TBH, I am completely mystified why this is happening. Can somebody make a reduced test case?

songololo · 2020-10-30T13:11:10Z

I think in my case it may be something to do with vuepress calling an older version of postcss under the hood...

aveltras · 2020-11-16T14:38:07Z

I has this error happen to me while I only had postcss-cli in my explicit dependencies.
Adding postcss as an explicit dependency fixed it.

simenbrekken · 2020-11-17T14:18:48Z

Just ran into this myself today, the culprit being Storybook that references an older postcss-loader that in turn imported an older postcss-import (https://github.com/storybookjs/storybook/blob/next/lib/core/package.json#L112)

Manubi · 2020-11-29T13:08:45Z

So what's the solution? :D

simenbrekken · 2020-11-29T19:38:36Z

We ended up pinning postcss-import at 12.x while keeping up-to-date with postcss on the latest branch:

    "postcss": "^8.1.9",
    "postcss-import": "12.0.1",

aslamdoctor · 2020-12-12T05:21:38Z

@simenbrekken thank you. That worked.

rabota-alexey · 2021-01-26T20:33:18Z

Just downgrade to
"postcss-loader": "^4.1.0"

picocodes · 2021-02-10T17:24:19Z

For anyone else whom @simenbrekken's does not work for, you might have installed postcss-cli globally. Please update the CLI to at least version 8, which loads version 8 of postcss. That's what worked for me.

wallace-sf · 2021-02-13T20:41:30Z

Same here.

"postcss-import": "^14.0.0",
"postcss": "^8.2.4"

RyanZim · 2021-02-15T17:52:09Z

I cannot debug anything without a reduced test case demonstrating this issue.

muratx10 · 2021-02-26T15:43:37Z

@simenbrekken thank you! Worked for me.

…ning postcss-import 12.x postcss/postcss-import#435

…nto master * 'master' of git://github.com/EarthCubeGeochron/Sparrow: (359 commits) Revert "Integrate frontend changes into develop" intermittent failing tests un decorated xfail decoration for failing test Fix changelog additions Added some small changes docs header image geo_entity prototype Importer test still fails Somewhat better test-isolation class Created a failing test of isolation Casey's frontend and backend changelog Casey's frontend and backend changelog fixup explicit session querying test won't pass. Creates an extra session isolated geoentity component error finding images/gowganda.jpg... not sure what this is? This might be docusaurs trying to configure my github photo on the blog page? upgraded docusaurus, issues with postCSS 8, temporary solution is pinning postcss-import 12.x postcss/postcss-import#435 Fixed catastrophic datasheet bug on empty Sparrow Add SPARROW_DATA_DIR environment variable to backend ...

* commit '279984c': (358 commits) intermittent failing tests un decorated xfail decoration for failing test Fix changelog additions Added some small changes docs header image geo_entity prototype Importer test still fails Somewhat better test-isolation class Created a failing test of isolation Casey's frontend and backend changelog Casey's frontend and backend changelog fixup explicit session querying test won't pass. Creates an extra session isolated geoentity component error finding images/gowganda.jpg... not sure what this is? This might be docusaurs trying to configure my github photo on the blog page? upgraded docusaurus, issues with postCSS 8, temporary solution is pinning postcss-import 12.x postcss/postcss-import#435 Fixed catastrophic datasheet bug on empty Sparrow Add SPARROW_DATA_DIR environment variable to backend Updated changelog ...

* main: Update version info and changelog master -> main in CI Potentially fix get-sparrow script docs header image error finding images/gowganda.jpg... not sure what this is? This might be docusaurs trying to configure my github photo on the blog page? upgraded docusaurus, issues with postCSS 8, temporary solution is pinning postcss-import 12.x postcss/postcss-import#435 WIP try to get docs to compile bundled version docs, warn against clone added 1.6 tag to sparrowdata/backend Update schema-based-importers.md no schema html page bundled sparrow docs, schema page html not found Fix error in get-sparrow script Datascience Link python test and debugger documentation moved the root of datascience so now the route is docs/datascience delete removed files causing errors

* origin/develop: (32 commits) new-sample and new-project buttons sample cards not draggable when not editing not draggable if no sessions rearrange model-views rearranging organize files and small edits metrics endpoint core-plugin NO VIEW Update version info and changelog master -> main in CI Fix docs changelog Potentially fix get-sparrow script symlink changelog to docs new frames mapStyles no as frontend plugins formatting metrics view now external plugin html2canvas and samplePage frame docs header image error finding images/gowganda.jpg... not sure what this is? This might be docusaurs trying to configure my github photo on the blog page? upgraded docusaurus, issues with postCSS 8, temporary solution is pinning postcss-import 12.x postcss/postcss-import#435 ...

RyanZim · 2021-03-31T22:58:23Z

Closing, since no reduced test case has presented itself.

testacode · 2021-07-15T15:10:58Z

I'm not using any post css and I'm getting this when using mini-css-extract-plugin

karladler · 2021-10-11T12:37:52Z

In my case it was a bunch of modules requesting postcss@7 as dependency. See yarn why postcss
Since the postcss API from 7 to 8 should not differ much I just resolved the issue by adding postcss@8 to the resolutions in package.json

 "resolutions": {
    "postcss": "8"
  }

FrancescoMussi · 2021-11-02T12:04:36Z

Thanks @karladler.
Elegant and effective solution.
Afterwards I just had to refresh running yarn and the error was gone.

duc168 · 2021-12-14T09:13:31Z

We ended up pinning postcss-import at 12.x while keeping up-to-date with postcss on the latest branch:
    "postcss": "^8.1.9",
    "postcss-import": "12.0.1",

I had trouble with rollup-plugin-postcss.
It worked, just run yarn add -D [email protected] and yarn add -D [email protected].

leandro-ortiz-encora · 2022-01-26T18:54:01Z

I had a similar error on building a Grafana plugin, but the dependencies are internal to the plugin (I can't update them).
However, it worked for me just by using yarn instead of npm.

storybook has a conflict with cra due to versioning issues on babel loader and a faulty check on the cra side (see: storybookjs/storybook#13183 and facebook/create-react-app#10123 (comment)). this required either some hackery on the command side (by disabling preflight checks) or upgrading react-scripts to 5.0. as react scripts is not a direct dependency at runtime when serving our application, i opted for this approach. another issue that cropped up was postcss requiring version 8 due to transistive dependencies (design system -> chakra -> tailwind -> postcss). this was fixed by installing a direct dependency on postcss @ 8, which was the approach mentioned here: postcss/postcss-import#435. A dev mentioned that the API between 7/8 did not differ much and the release notes for 8 (https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users) also mentioned that there are no significant differences for end users, so this should be safe. tl;dr: build issues are fixed by upgrading dependencies. if you ever read this message, or any of the previous long commit messages, please drop me a :ultrafastparrot: thx

jotapardo · 2022-11-04T16:17:35Z

On my file package.json I configured this:

"dependencies": {
   "postcss-import": "^14.1.0",
   "postcss-loader": "^4.3.0",
   "postcss-mixins": "^9.0.2",
   "postcss-nesting": "^10.1.4",
 },
 "devDependencies": {
   "postcss": "^8.4.18",
 },
 "peerDependencies": {
   "postcss": "^8.4.18"
 },

I noticed the file package-lock.json had a section for an specific package I use (@ckeditor/ckeditor5-dev-utils) and it was requiring specific versions installed:

"@ckeditor/ckeditor5-dev-utils": {
      "version": "31.1.5",
      "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-dev-utils/-/ckeditor5-dev-utils-31.1.5.tgz",
      "integrity": "sha512-0hBxhrA0aLkLHxmC3Pc9ruebELeWtOFqK599Lo304CdA3R9UOIYwHnNCXw8NTwnxAtPuvsqAATwbHGEV/tpy9g==",
      "requires": {
           
        "postcss": "^8.4.12",
        "postcss-import": "^14.1.0",
        "postcss-loader": "^4.3.0",
        "postcss-mixins": "^9.0.2",
        "postcss-nesting": "^10.1.4",
           
      },
      "dependencies": {
    [rest of the list of dependences].
      }
    },

jotapardo · 2022-11-04T16:21:57Z

Also I followed these links:

https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
https://evilmartians.com/chronicles/postcss-8-plugin-migration

hongbo-miao · 2022-11-20T04:19:21Z

Thanks @karladler at #435 (comment) for the yarn solution.

In my case, I am using npm.

I didn't use postcss directly. However, when Renovate does lock file maintenance of package-lock.json, it throws error

PostCSS plugin postcss-discard-comments requires PostCSS 8

when I build my web app.

Because some dependencies of dependencies are using PostCSS 7

Adding overrides:

"overrides": {
   "postcss": "8.4.19"
}

in package.json which is similar to resolutions from yarn.

Then run npm install. Next time, when Renovate does lock file maintenance of package-lock.json, it will use PostCSS 8 instead of PostCSS 7.

Note

overrides got supported since npm 8.3.0.
peerDependencies does not work for me in this Renovate lock file maintenance case. Some are still using PostCSS 7.

This was referenced Oct 25, 2020

Storybook周りのリファクタリングを行う nekochans/kimono-app-frontend#25

Closed

PostCSSのバージョンを8系に更新する nekochans/kimono-app-frontend#48

Closed

saintaze mentioned this issue Nov 13, 2020

adds Storybook to the project JVictorV/cool-next-template#2

Closed

wibed mentioned this issue Dec 27, 2020

New Tailwind theme facebook/docusaurus#2961

Open

chiilog mentioned this issue Jan 5, 2021

packages update hamworks/wp-boilerplate#1

Merged

Idzikowski-Casey added a commit to EarthCubeGeochron/Sparrow that referenced this issue Mar 12, 2021

upgraded docusaurus, issues with postCSS 8, temporary solution is pin…

e65eaa4

…ning postcss-import 12.x postcss/postcss-import#435

RyanZim closed this as completed Mar 31, 2021

minevala mentioned this issue May 19, 2021

Fix/postcss vulnerability City-of-Helsinki/helsinki-design-system#448

Merged

lpreterite mentioned this issue Aug 30, 2021

PostCSS plugin postcss-url requires PostCSS 8. Migration guide for end-users postcss/postcss-url#154

Open

tdonohue mentioned this issue Dec 3, 2021

Upgrade to PostCSS v8 for custom-webpack v11 (and above) DSpace/dspace-angular#1433

Closed

GIScyw mentioned this issue Oct 15, 2022

【问题】Error: PostCSS plugin postcss-discard-comments requires PostCSS 8. GIScyw/blog#25

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Throws "Error: PostCSS plugin postcss-import requires PostCSS 8" even when PostCSS 8 is installed #435

Throws "Error: PostCSS plugin postcss-import requires PostCSS 8" even when PostCSS 8 is installed #435

ChildishGiant commented Oct 22, 2020 •

edited

Loading

RyanZim commented Oct 22, 2020

ChildishGiant commented Oct 22, 2020

www-chique commented Oct 25, 2020

RyanZim commented Oct 27, 2020

songololo commented Oct 29, 2020

RyanZim commented Oct 30, 2020

songololo commented Oct 30, 2020

aveltras commented Nov 16, 2020 •

edited

Loading

simenbrekken commented Nov 17, 2020

Manubi commented Nov 29, 2020

simenbrekken commented Nov 29, 2020

aslamdoctor commented Dec 12, 2020

rabota-alexey commented Jan 26, 2021

picocodes commented Feb 10, 2021

wallace-sf commented Feb 13, 2021

RyanZim commented Feb 15, 2021

muratx10 commented Feb 26, 2021

RyanZim commented Mar 31, 2021

testacode commented Jul 15, 2021

karladler commented Oct 11, 2021 •

edited

Loading

FrancescoMussi commented Nov 2, 2021

duc168 commented Dec 14, 2021

leandro-ortiz-encora commented Jan 26, 2022 •

edited

Loading

jotapardo commented Nov 4, 2022 •

edited

Loading

jotapardo commented Nov 4, 2022

hongbo-miao commented Nov 20, 2022 •

edited

Loading

Throws "Error: PostCSS plugin postcss-import requires PostCSS 8" even when PostCSS 8 is installed #435

Throws "Error: PostCSS plugin postcss-import requires PostCSS 8" even when PostCSS 8 is installed #435

Comments

ChildishGiant commented Oct 22, 2020 • edited Loading

RyanZim commented Oct 22, 2020

ChildishGiant commented Oct 22, 2020

www-chique commented Oct 25, 2020

RyanZim commented Oct 27, 2020

songololo commented Oct 29, 2020

RyanZim commented Oct 30, 2020

songololo commented Oct 30, 2020

aveltras commented Nov 16, 2020 • edited Loading

simenbrekken commented Nov 17, 2020

Manubi commented Nov 29, 2020

simenbrekken commented Nov 29, 2020

aslamdoctor commented Dec 12, 2020

rabota-alexey commented Jan 26, 2021

picocodes commented Feb 10, 2021

wallace-sf commented Feb 13, 2021

RyanZim commented Feb 15, 2021

muratx10 commented Feb 26, 2021

RyanZim commented Mar 31, 2021

testacode commented Jul 15, 2021

karladler commented Oct 11, 2021 • edited Loading

FrancescoMussi commented Nov 2, 2021

duc168 commented Dec 14, 2021

leandro-ortiz-encora commented Jan 26, 2022 • edited Loading

jotapardo commented Nov 4, 2022 • edited Loading

jotapardo commented Nov 4, 2022

hongbo-miao commented Nov 20, 2022 • edited Loading

ChildishGiant commented Oct 22, 2020 •

edited

Loading

aveltras commented Nov 16, 2020 •

edited

Loading

karladler commented Oct 11, 2021 •

edited

Loading

leandro-ortiz-encora commented Jan 26, 2022 •

edited

Loading

jotapardo commented Nov 4, 2022 •

edited

Loading

hongbo-miao commented Nov 20, 2022 •

edited

Loading