Closed abepark01 closed 3 years ago
I was able to temporarily work around this issue with:
-require('postcss-nested')
+require('postcss-nested').default
I assume this is an unintended regression though as I didn't see anything in the changelog about it.
It happens because you use PostCSS 7, which does not support PostCSS 8 plugins.
I will try to improve the error message today and help the postcss-cli
team to make update
@mturco you do not need default
since postcss-nested
is CJS module.
@ai yeah I noticed that in the source which is why I was very confused when that did seem to resolve the issue. I've added postcss@8.0.5
as a dependency though so I'm not sure what the cause is.
Actually I think I just stumbled upon the issue:
❯ yarn list postcss
yarn list v1.22.5
├─ @storybook/core@6.0.21
│ └─ postcss@7.0.32
├─ autoprefixer@9.8.6
│ └─ postcss@7.0.32
├─ css-loader@3.6.0
│ └─ postcss@7.0.32
├─ icss-utils@4.1.1
│ └─ postcss@7.0.32
├─ postcss-flexbugs-fixes@4.2.1
│ └─ postcss@7.0.32
├─ postcss-focus-visible@5.0.0
│ └─ postcss@7.0.32
├─ postcss-initial@3.0.2
│ └─ postcss@7.0.32
├─ postcss-less@3.1.4
│ └─ postcss@7.0.32
├─ postcss-modules-extract-imports@2.0.0
│ └─ postcss@7.0.32
├─ postcss-modules-local-by-default@3.0.2
│ └─ postcss@7.0.32
├─ postcss-modules-scope@2.2.0
│ └─ postcss@7.0.32
├─ postcss-modules-values@3.0.0
│ └─ postcss@7.0.32
├─ postcss-reporter@5.0.0
│ └─ postcss@6.0.23
├─ postcss-safe-parser@4.0.2
│ └─ postcss@7.0.32
├─ postcss-sass@0.4.4
│ └─ postcss@7.0.32
├─ postcss-scss@2.1.1
│ └─ postcss@7.0.32
├─ postcss@8.0.5
├─ prettier-stylelint@0.4.2
│ ├─ postcss-less@1.1.5
│ │ └─ postcss@5.2.18
│ └─ postcss@6.0.23
├─ sanitize-html@1.27.4
│ └─ postcss@7.0.32
├─ stylelint@13.7.1
│ └─ postcss@7.0.32
└─ sugarss@2.0.0
└─ postcss@7.0.32
✨ Done in 1.12s.
If I add "resolutions": { "postcss": "^8.0.5" }
to force Yarn to install v8, I don't get the postcss-nested
error (although I do get errors from other incompatible plugins). After adding that:
❯ yarn list postcss
yarn list v1.22.5
└─ postcss@8.0.5
✨ Done in 0.97s.
So v7 does indeed seem to be the issue.
It happens because you use PostCSS 7, which does not support PostCSS 8 plugins.
I will try to improve the error message today and help the
postcss-cli
team to make update
Thanks for the quick response!
The config I posted works in both postcss 7 and 8 when using postcss-nested 4.2.3. The error seems to happen in postcss-nested 5.0.0.
package.json
devDependencies: {
"postcss": "^8.0.5",
"postcss-import": "^12.0.1",
"postcss-nested": "^4.2.3",
},
I'm using postcss
v8 and it's happening to me with postcss-nested
v5. The solution @mturco posted, appending .default
to the require
call worked for me as a fix.
I can confirm it happens with latest version 5.0.0. Tried to downgrade to v4.2.3 and it loads normally.
Same problem here:
Error: PostCSS plugin postcss-nested requires PostCSS 8. Update PostCSS or downgrade this plugin.
I am closing the issue, since it is expected behaviour
The above error I'm describing is appearing regardless of what version of postcss is installed, v8 or higher
@kaleidografik check npm ls | grep postcss
output. You will ned postcss 7
in the list.
@ai So, the error happens in both postcss 7 and 8 as @kaleidografik mentioned. Thanks
@abepark01 it can’t happen in PostCSS 8 because this error text exists only in PostCSS 7.
Check out npm ls
. You will find postcss 7
dependencies in some tool like postcss-cli
or postcss-loader
. You need to update the PostCSS runner to use PostCSS 8. Just adding postcss 8
to package.json
will not change what a runner is using.
I upgraded postcss-nested from 4.2.3 to 5.0.0.
I am running a rails 6 project using webpacker 5.2.1 After I ran webpack I got the following error: Upgrade from TypeError: Invalid PostCSS Plugin found at: plugins[1]
The error happens on both postcss 7.0.32 and 8.0.5 (latest).
When I downgrade back to 4.2.3, this same postcss config works fine.