angularwebpacksasstailwind-csspostcss-loader

"TypeError: node.getIterator is not a function" in SCSS compilation after migration to Angular 11 (custom webpack)

An error occures in the loading of scss-files in my Angular project. This error appeared first after I migrated from Angular v9 to v11 (I followed the migration guide and all went smooth).

The error:

Error: ./src/styles.scss
Module build failed (from ./node_modules/@angular-devkit/build-angular/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

This error is shown for each .scss file, that fails to parse.

The context:

The project is making use of the @angular-builders/custom-webpack webpack builder. I use this because we are making use of Tailwind CSS.

Webpack has a config for postCSS:

module.exports = {
    module: {
        rules: [
            {
                test: /\.scss$/,
                loader: 'postcss-loader',
                options: {
                    postcssOptions: {
                        ident: 'postcss',
                        syntax: 'postcss-scss',
                        plugins: ['postcss-import', 'tailwindcss', 'autoprefixer'],
                    },
                },
            },
        ],
    },
};

The angular.json file is pretty standard.

The dependencies:

Any pointers to see where it could go wrong would be much appreciated.

Solution

  • After some research there were two things that really helped: