• 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:\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
            }
        }

        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')
        }
    }

• 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:\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
            }
        }

        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')
        }
    }

• javascript
• webpack
• less
• postcss

3 Answers 3

I found the postcss plugin postcss-px2rem-exclude that caused the error.

Also getting node.getIterator is not a function, some of my packages are on [email protected] and some are [email protected]. The only place in my node_modules calling node.getIterator is in node_modules/optimize-css-assets-webpack-plugin/node_modules/postcss/lib. It seems the inpatibility is 7/8, but optimize-css-assets-webpack-plugin's latest uses uses "cssnano": "^4.1.10" which has dependency of postcss: ^7.0.0, but the rest of the files like optimize-css-assets-webpack-plugin\node_modules\*\package.json use postcss 8...

I fixed it with yarn add [email protected] -W.

Check for the plugins property inside webpack.config.js , I fixed the same issue by including this before externals property :

plugins: [new MiniCssExtractPlugin({ filename: 'webp-name-module.css' })],