• webpack 5.37.1


• mini-css-extract-plugin 1.6.0


• postcss-loader 5.3.0


• less 4.1.1

Expected Behavior

Build success.

Actual Behavior

Module build failed when using mini-css-extract-plugin with postcss-loader for less. If I remove postcss-loader from the loaders list, then it builds correctly. Problem with mini-css-extract-plugin or postcss-loader ?

ERROR in ./src/views/app.vue?vue&type=style&index=0&lang=less& (./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-7[0].rules[0].use[1]!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-7[0].rules[0].use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-7[0].rules[0].use[3]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/views/app.vue?vue&type=style&index=0&lang=less&)

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):

ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):

TypeError: node.getIterator is not a function

    at LazyResult.visitTick (E:demonode_modulespostcssliblazy-result.js:522:33)

    at LazyResult.runAsync (E:demonode_modulespostcssliblazy-result.js:402:30)

    at async Object.loader (E:demonode_modulespostcss-loaderdistindex.js:87:14)

    at processResult (E:demonode_moduleswebpacklibNormalModule.js:700:19)

    at E:demonode_moduleswebpacklibNormalModule.js:806:5

    at E:demonode_modulesloader-runnerlibLoaderRunner.js:399:11

    at E:demonode_modulesloader-runnerlibLoaderRunner.js:251:18

    at context.callback (E:demonode_modulesloader-runnerlibLoaderRunner.js:124:13)

    at Object.loader (E:demonode_modulespostcss-loaderdistindex.js:96:7)

 @ ./src/views/app.vue?vue&type=style&index=0&lang=less& 1:0-482 1:0-482

 @ ./src/views/app.vue 4:0-64

 @ ./src/main.js 7:0-32 28:13-20

Code

    exports.cssLoaders = function (options) {

        options = options || {};



        const cssLoader = {

            loader: 'css-loader',

            options: {

                sourceMap: options.sourceMap

            }

        }



        const postcssLoader = {

            loader: 'postcss-loader',

            options: {

                sourceMap: options.sourceMap

            }

        }



        function generateLoaders (loader, loaderOptions) {

            const loaders = [];



            if (options.extract) {

                loaders.push(MiniCssExtractPlugin.loader)

            } else {

                loaders.push('vue-style-loader')

            }



            loaders.push(cssLoader)



            if (options.usePostCSS) {

                loaders.push(postcssLoader)

            }



            if (loader) {

                loaders.push({

                    loader: loader + '-loader',

                    options: Object.assign({}, loaderOptions, {

                        sourceMap: options.sourceMap

                    })

                })

            }



            return loaders

        }

        return {

            css: generateLoaders(),

            postcss: generateLoaders(),

            less: generateLoaders('less')

        }

    }