postcss-nested 'parent' of undefined error in next js
DevAbas opened this issue ยท 9 comments
Hi,
When I try to run yarn dev
or yarn build
I get an error like this.
error - ./src/components/Footer/styles.module.css (./node_modules/next/node_modules/css-loader/dist/cjs.js??ref--5-oneOf-2-1!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ref--5-oneOf-2-2!./src/components/Footer/styles.module.css)
TypeError: Cannot set property 'parent' of undefined
at Array.map ()
the package versions I use:
"next": "^10.0.4",
"postcss": "^8.2.2",
"postcss-nested": "^5.0.3",
This stack trace is not enough to understand that error came from PostCSS.
Can you debug the error and open another issue when you will find a source of the problem?
I'm getting the same error running yarn dev
with Next.js.
error - ./styles/index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ref--5-oneOf-6-2!./styles/index.css)
TypeError: Cannot set property 'parent' of undefined
at Array.map (<anonymous>)
If postcss-nested
is removed, the build completes successfully.
There's not much else to debug...here is the error from Next:
"next": "latest",
"postcss": "^8.1.13",
"postcss-import": "^14.0.0",
"postcss-nested": "^5.0.3",
"postcss-preset-env": "^6.7.0",
@DevAbas not sure if this will fix your issue but I had nesting 2-levels deep which does not seem to work e.g.:
.selector {
.sub-item {
p {
// ...this seems to throw the error.
}
}
}
This does work:
.selector {
.sub-item {
// styles here
}
.sub-item p {
// more styles here
}
}
I had the same problem. But on 4 levels. Basically the above with a little more complexity:
Same versions and setup and error here as well, as @joshuaiz listed above.
.selector {
.sub-item {
p {
// ...this seems to throw the error.
}
.modifier & {
// ... more errors here
}
}
}
Identical styles work well using sass/scss in next.js.
And as pointed out by @joshuaiz flattening it to only nest one level deep fixes it. But that's kinda beside the point of using a nesting plugin to un-nest the css rules when nesting the rules breaks the plugin.
Does the plugin support more than one level of nesting usually? Or is that a known limitation?
So I tried it with
postcss-nested@5.0.1
and postcss@^8.1.0
--> nested rules just don't get expanded, they get printed as is in the resulting CSS
postcss-nested@5.0.2
and postcss@^8.1.5
--> same error, the dreaded TypeError: Cannot set property 'parent' of undefined at Array.map (<anonymous>)
postcss-nested@5.0.3
and postcss@8.2.2
--> same error, the dreaded TypeError: Cannot set property 'parent' of undefined at Array.map (<anonymous>)
Can reproduce.
We do not need extra details about issue reproducing. We need somebody who will do a deep invastigation and then will make good PR.
If you need a solution but do not have time, donate to our PostCSS Open Collective.
Just donated to your OpenCollect. Have the same issue after I upgraded to postcss 8 and the most recent version of postcss-nested.
This is the CSS:
https://github.com/manuelbieh/react-ssr-setup/blob/master/src/shared/components/Features/Features.module.css
When I remove all the child selectors inside of the .wrapper li
it works. Whenever I go deeper than .wrapper li
it breaks. When I make it .wrapper ul li
it breaks. Looks like it only supports one level of nesting ๐ค
// edit:
okay, wow. after 2 hours of investigating I found out I still had
"resolutions": {
"postcss": "^8.1.1"
}
in my package.json which caused everything to fail. Just for reference, in case somebody has the same error in the future.
I had the same issue. To temp fixed, I have downgraded to 5.0.1
.