Postcss-nested 5.0.0: TypeError: Invalid PostCSS Plugin found at: plugins[1]

[abepark01]

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]

RROR in ./node_modules/select2/dist/css/select2.css (./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/postcss-loader/src??ref--5-2!./node_modules/select2/dist/css/select2.css) Module build failed (from ./node_modules/postcss-loader/src/index.js): TypeError: Invalid PostCSS Plugin found at: plugins[1]

(@/Users/abe/workspace/spark-io/postcss.config.js) at /Users/abe/workspace/spark-io/node_modules/postcss-load-config/src/plugins.js:72:15 at Array.forEach () at plugins (/Users/abe/workspace/spark-io/node_modules/postcss-load-config/src/plugins.js:58:13) at processResult (/Users/abe/workspace/spark-io/node_modules/postcss-load-config/src/index.js:33:14) at /Users/abe/workspace/spark-io/node_modules/postcss-load-config/src/index.js:94:14 ℹ ｢wdm｣: Failed to compile.

The error happens on both postcss 7.0.32 and 8.0.5 (latest).

const postcssImport = require('postcss-import');
const postcssNested = require('postcss-nested');
const tailwindCss = require('tailwindcss');

module.exports = {
  plugins: [
    postcssImport(),
    postcssNested(),
    tailwindCss('./app/javascript/css/tailwind.config.js'),
  ],
};

When I downgrade back to 4.2.3, this same postcss config works fine.

[mturco]

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.

[ai]

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

[ai]

@mturco you do not need default since postcss-nested is CJS module.

[mturco]

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

[mturco]

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.

[abepark01]

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

[ntilwalli]

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.

[codetot]

I can confirm it happens with latest version 5.0.0. Tried to downgrade to v4.2.3 and it loads normally.

[kaleidografik]

Same problem here:

Error: PostCSS plugin postcss-nested requires PostCSS 8. Update PostCSS or downgrade this plugin.

[ai]

I am closing the issue, since it is expected behaviour

[kaleidografik]

The above error I'm describing is appearing regardless of what version of postcss is installed, v8 or higher

[ai]

@kaleidografik check npm ls | grep postcss output. You will ned postcss 7 in the list.

[abepark01]

@ai So, the error happens in both postcss 7 and 8 as @kaleidografik mentioned. Thanks

[ai]

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