5.x break webpack build

[derek-zhou]

I am seeing:

...
        }
    }
     is not a PostCSS plugin
        at Processor.normalize (/home/derek/projects/roastidious/assets/node_modules/postcss/lib/processor.js:60:15)

After upgrade to 5.x. 4.2.3 is fine. My postcss.config.js is:

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('postcss-nested'),
        require('autoprefixer'),
    ],
};

relevent part of my package.json:

  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "babel-loader": "^8.0.0",
    "coffee-loader": "^1.0.0",
    "coffeescript": "^2.5.1",
    "copy-webpack-plugin": "^6.1.1",
    "css-loader": "^3.4.2",
    "mini-css-extract-plugin": "^0.9.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "postcss": "^8.1.1",
    "postcss-cli": "^8.0.0",
    "postcss-loader": "^4.0.2",
    "postcss-nested": "^5.0.1",
    "style-loader": "^1.2.1",
    "terser-webpack-plugin": "^2.3.2",
    "webpack": "4.41.5",
    "webpack-cli": "^3.3.2"
  }
}

[ai]

Can you show the full error message?

[derek-zhou]

The full error message is very long. It just shows my processed CSS then said it is not a postcss plugin. The CSS process itself is good. postcss-cli works too. Seems like somehow postcss believe the css process is not completed and need further processing? If you are not seeing this it must be some particular packages combination I have that cause this. What I know is:

• 4.2.3 is good;
• remove postcss-nested from the plugin list is good (though the nested css won't be processed)
• removing any other plugin from the list, I only have tailwindcss and autoprefixer, will not help, nor is changing order

[ai]

Can you show at least a full stacktrace?

[derek-zhou]

you mean this:

      @media (min-width: 1280px) {
        .xl\:container {
          max-width: 1280px;
        }
      }
    }
     is not a PostCSS plugin
        at Processor.normalize (/home/derek/projects/roastidious/assets/node_modules/postcss/lib/processor.js:60:15)
        at new Processor (/home/derek/projects/roastidious/assets/node_modules/postcss/lib/processor.js:9:25)
        at postcss (/home/derek/projects/roastidious/assets/node_modules/postcss/lib/postcss.js:24:10)
        at LazyResult.runOnRoot (/home/derek/projects/roastidious/assets/node_modules/postcss/lib/lazy-result.js:276:16)
        at LazyResult.runAsync (/home/derek/projects/roastidious/assets/node_modules/postcss/lib/lazy-result.js:328:26)

I can try to make a minimal case and put it in github, but that has to wait til tomorrow.

[ai]

@derek-zhou somebody sends something wrong to PostCSS.

Can you remove tailwindcss and autoprefixer? Minimal case will be very useful.

[derek-zhou]

I have a minimal case here: https://github.com/derek-zhou/example.git tested to fail on 2 machines, one 64 bit linux node v10.15.2, one 32 bit linux node v 10.22.1

to repro, just npm install && npx webpack

[spacedawwwg]

Just come across this same issue, but only when running the plugin through webpack postcss-loader (postcss-nested runs fine via cli)

[sporto]

I was trying to debug something else and ran into this. My minimal config is

app.css

div {}

webpack.config.js

var config = {
  context: __dirname,
  entry: {
    css: "./app.css",
  },
  module: {
    rules: [
      {
        test: /app.css/,
        use: [
          "css-loader",
          "postcss-loader",
        ],
      },
    ],
  },
}

module.exports = config

postcss.config.js

module.exports = {
  plugins: [
    require('postcss-nested'),
  ]
}

I get

ERROR in ./app.css
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: div {}
 is not a PostCSS plugin
    at Processor.normalize (/home/sebastian/Source/sporto/postcss-nested-repro/node_modules/postcss/lib/processor.js:60:15)
    at new Processor (/home/sebastian/Source/sporto/postcss-nested-repro/node_modules/postcss/lib/processor.js:9:25)
    at postcss (/home/sebastian/Source/sporto/postcss-nested-repro/node_modules/postcss/lib/postcss.js:24:10)
    at LazyResult.runOnRoot (/home/sebastian/Source/sporto/postcss-nested-repro/node_modules/postcss/lib/lazy-result.js:276:16)
    at LazyResult.runAsync (/home/sebastian/Source/sporto/postcss-nested-repro/node_modules/postcss/lib/lazy-result.js:328:26)
    at LazyResult.async (/home/sebastian/Source/sporto/postcss-nested-repro/node_modules/postcss/lib/lazy-result.js:178:30)
    at LazyResult.then (/home/sebastian/Source/sporto/postcss-nested-repro/node_modules/postcss/lib/lazy-result.js:163:17)

[derek-zhou]

Update: change

require('postcss-nested'),

to simply:

'postcss-nested',

in postcss.config.js fixes this issue. It is not entirely clear which is the correct way to config postcss; postcss doc and postcss-loader doc use different styles. The few other plugins that I use can tolerate both styles, so is postcss-nested@4.2.3. It is just postcss-nested@5.0.1 that cannot tolerate the require.

[ai]

Both syntaxes should be supported, but seems like there is an issue in plugin loading mechanism

[ai]

It was a postcss-loader plugin loadings issue. I send them a fix

https://github.com/webpack-contrib/postcss-loader/pull/489

[ai]

Fixed in postcss-loader 4.0.3