Invalid PostCSS Plugin found

[Alexandr-Lazariev]

Hi, I'm trying to extract some media queries from my css bundles, but unfortunately plugin is not working.

ERROR in ./node_modules/css-loader!./node_modules/postcss-loader/src!./node_modules/jscrollpane/style/jquery.jscrollpane.css
    Module build failed: TypeError: Invalid PostCSS Plugin found at: plugins[0]

Here is my postcss.config.js

const path = require('path');

module.exports = {
    plugins: [
        {
            'postcss-extract-media-query': {
                output: {
                    path: path.join(__dirname, 'dist'),
                    name: '[name]-[query].[ext]'
                },
                queries: {
                    'screen and (min-width: 1024px)': 'desktop'
                }
            }
        }
    ]
}

Postcss works fine without this plugin. I'm using webpack 3 with it. Part of my package.json

    "postcss": "^7.0.14",
    "postcss-extract-media-query": "^1.2.0",
    "postcss-loader": "^3.0.0",

Do you have any idea why it's not working?

[SassNinja]

@Alexandr-Lazariev I've updated the webpack example to use the latest version of postcss-loader. It's still working afterwards.

However I'm using webpack 4, not 3. Have you considered upgrading to 4?

[Alexandr-Lazariev]

Hey, thanks for reply, actually my issue was related to incorrect path, instead of using 'dist' I should have used 'assets', as simple as that.

However, I'm still facing another issue, I have a lot of css files in my assets folder and I'm not sure how can I use entry and output setting to have multiple query files from multiple entries with different names

 entry: path.join(__dirname, outputPath + '/*.css'),
    output: {
        path: path.resolve(__dirname, outputPath),
        name: '[name]-[query].css'
    },
    queries: {
        'only screen and (min-width: 1025px)': 'desktop'
    },
    minimize: true,
    whitelist: true,
}

The output file name is: *-desktop.css and I want to have: global-desktop.css specific-desktop.css

I guess the whole problem is path.join(__dirname, outputPath + '/*.css') But I'm not sure what should be here instead

[SassNinja]

I guess the whole problem is path.join(__dirname, outputPath + '/*.css') But I'm not sure what should be here instead

yup, the problem is starting there

1. I haven't implemented glob support and thus *.css is considered as one file
2. the entry option is not built to support multiple entries but only one file, assuming the postcss plugin is executed per file (either manually or via bundler/task runner)

Please provide your webpack config & package.json so I can reproduce the issue.