Search code examples
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:

  • Angular: ^11

  • @angular-builders/custom-webpack: ^11

  • postcss: ^8.2.6

  • postcss-import: ^14.0.0

  • postcss-loader: ^4.2.0

  • postcss-scss: ^2.1.1

  • node: v15.8.0 - (I was wondering if this could be an issue, because I got some warnings on packages. However, I downgraded node with nvm and the same error occurred after reinstalling the packages and running it again.)

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

Solution

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