Mini-css-extract-plugin: the plugin is ERROR in production mode of webpack@4

[yangguansen]

webpack version: 4.16.3,
mini-css-extract-plugin: 0.4.1
I want to extract css into a css file in my react-cli use webpack@4, but it give me error:

./src/page/common/style.less (./node_modules/css-loader??ref--6-1!./node_modules/postcss-loader/lib??postcss!./node_modules/less-loader/dist/cjs.js!./node
_modules/mini-css-extract-plugin/dist/loader.js!./src/page/common/style.less)
  0:0  error  Module build failed (from
              ./node_modules/mini-css-extract-plugin/dist/loader.js):

× 1 problem (1 error, 0 warnings)

this is my code:
webpack.build.config.js

const base = require( './webpack.common.config' );
const MiniCssExtractPlugin = require( "mini-css-extract-plugin" );

module.exports = merge(base,{
...
output: {
        path: path.resolve( __dirname, '../dist/' ),
        filename: 'js/[name].[chunkhash:8].js'
    },
}),
 module: {
        rules: [
            {
                test: /\.(css|less)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: require.resolve( 'css-loader' ),
                        options: {
                            importLoaders: 1,
                            modules: true,
                            localIdentName: "[local]_[hash:base64:5]"
                        },
                    },
                    {
                        loader: require.resolve( 'postcss-loader' ),
                        options: {
                            // Necessary for external CSS imports to work
                            // https://github.com/facebookincubator/create-react-app/issues/2677
                            ident: 'postcss',
                            plugins: () => [
                                require( 'postcss-flexbugs-fixes' ),
                                autoprefixer( {
                                    browsers: [
                                        '>1%',
                                        'last 4 versions',
                                        'Firefox ESR',
                                        'not ie < 9', // React doesn't support IE8 anyway
                                    ],
                                    flexbox: 'no-2009',
                                } ),
                            ],
                        },
                    },
                    {
                        loader: require.resolve( 'less-loader' )
                    },
                ],
            },
        ]
    },
plugins: [
        ...
        new MiniCssExtractPlugin( {
            filename: "[name].css",
            chunkFilename: "[id].css"
        } ),
        ...
    ]

Where is my error,please help me, thanks

[yangguansen]

Now my setting is change to below:

 {
                test: /\.(css|less)$/,
                // include: /node_modules|antd\.(css|less)/,
                use: [
                    devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                    {
                        loader: require.resolve('css-loader'),
                        options: {
                            importLoaders: 1
                        },
                    },
                    {
                        loader: require.resolve('postcss-loader'),
                        options: {
                            // Necessary for external CSS imports to work
                            // https://github.com/facebookincubator/create-react-app/issues/2677
                            ident: 'postcss',
                            plugins: () => [
                                require('postcss-flexbugs-fixes'),
                                autoprefixer({
                                    browsers: [
                                        '>1%',
                                        'last 4 versions',
                                        'Firefox ESR',
                                        'not ie < 9', // React doesn't support IE8 anyway
                                    ],
                                    flexbox: 'no-2009',
                                }),
                            ],
                        },
                    },
                    {
                        loader: require.resolve('less-loader')
                    }
                ],
            },

new MiniCssExtractPlugin({
            publicPath: path.resolve( __dirname, '../dist' ),
            filename: "[name].css",
        }),

when i run npm run build, no error, but isn't available, css is still in js file, doesn't exact in alone css file.

[alexander-akait]

@yangguansen please create minimum reproducible test repo

[yangguansen]

this is my project dev branch which for this issue:https://github.com/yangguansen/react-cli/tree/dev,
thanks

[alexander-akait]

@yangguansen your should not use https://github.com/yangguansen/react-cli/blob/dev/webpack/webpack.common.config.js#L102 plugin by default, add plugin only when you add loader

[yangguansen]

now i separate the loader and plugin in build.config.js ,when i runnpm run build, it show some errors of Module build failed(from ./node_modules/mini-css-extract-plugin/dist/loader.js), is it conflict with less-loader？

[yangguansen]

I got know it's conflict with post-css plugin config.

[afk-mario]

Can you post your new config ? @yangguansen

[chenjiaj]

remove "sideEffects": false in package.json . and it can run ok