postcss-nested 'parent' of undefined error in next js

[DevAbas]

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",

[ai]

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?

[joshuaiz]

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",

[joshuaiz]

@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
    }
}

[jonashaefele]

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?

[jonashaefele]

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>)

[tyteen4a03]

Can reproduce.

[ai]

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.

[manuelbieh]

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.

[nghiepdev]

I had the same issue. To temp fixed, I have downgraded to 5.0.1.