Module build failed when using mini-css-extract-plugin with postcss-loader for less

• 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

This is the same problem as bug#522. But I don’t know how he solved it. So can you give some answers? Thanks~

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:\demo\node_modules\postcss\lib\lazy-result.js:522:33) at LazyResult.runAsync (E:\demo\node_modules\postcss\lib\lazy-result.js:402:30) at async Object.loader (E:\demo\node_modules\postcss-loader\dist\index.js:87:14) at processResult (E:\demo\node_modules\webpack\lib\NormalModule.js:700:19) at E:\demo\node_modules\webpack\lib\NormalModule.js:806:5 at E:\demo\node_modules\loader-runner\lib\LoaderRunner.js:399:11 at E:\demo\node_modules\loader-runner\lib\LoaderRunner.js:251:18 at context.callback (E:\demo\node_modules\loader-runner\lib\LoaderRunner.js:124:13) at Object.loader (E:\demo\node_modules\postcss-loader\dist\index.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
        }
    }

    // generate loader string to be used with extract text plugin
    function generateLoaders (loader, loaderOptions) {
        const loaders = []

        // Extract CSS when that option is specified
        // (which is the case during production build)
        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'),
        sass: generateLoaders('sass', {
            indentedSyntax: true
        }),
        scss: generateLoaders('sass'),
        stylus: generateLoaders('stylus'),
        styl: generateLoaders('stylus')
    }
}

Reproduce

The main(utils.js) code is above.

vue-loader.conf.js

module.exports = {
    loaders: utils.cssLoaders({
        sourceMap: sourceMapEnabled,
        extract: isProduction
    }),
    cssSourceMap: sourceMapEnabled,
    cacheBusting: config.dev.cacheBusting,
    transformToRequire: {
        video: 'src',
        source: 'src',
        img: 'src',
        image: 'xlink:href'
    }
}

webpack.base.conf.js

module.exports = {
module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: vueLoaderConfig
            }
        ]
    },
}

webpack.prod.conf.js

const webpackConfig = merge(baseWebpackConfig, {
    module: {
        rules: utils.styleLoaders({
            sourceMap: config.build.productionSourceMap,
            extract: true,
            usePostCSS: true
        })
    }
}

The command to run is cross-env NODE_ENV=production node webpack.prod.conf.js