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

Question

在我的 Angular 项目中加载 scss 文件时发生错误。这个错误是在我从 Angular v9 迁移到 v11 后首次出现的（我遵循了迁移指南，一切顺利）。

错误：

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

每个无法解析的 .scss 文件都会显示此错误。

上下文：

该项目正在使用 @angular-builders/custom-webpack webpack 构建器。我使用它是因为我们正在使用 Tailwind CSS.

Webpack 有一个配置 postCSS:

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

angular.json 文件非常标准。

依赖项：

Angular:^11
@angular-builders/custom-webpack:^11
postcss:^8.2.6
postcss 导入：^14.0.0
postcss-loader: ^4.2.0
postcss-scss: ^2.1.1
node: v15.8.0 - （我想知道这是否是个问题，因为我收到了一些关于包的警告。但是，我用 nvm 降级了 node，同样重新安装软件包并再次运行后发生错误。）

如果能指出可能出错的地方，我们将不胜感激。

Answer 1

我遇到了完全相同的问题，我通过阅读 postcss-loader 的文档解决了它： https://www.npmjs.com/package/postcss-loader#extract-css

我不得不将 webpack.config.js 更改为以下内容。你可能想适应你的情况。让我知道它是否有效！


const isProductionMode = process.env.NODE_ENV === "production";


module.exports = {
  mode: isProductionMode ? "production" : "development",
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          isProductionMode ? MiniCssExtractPlugin.loader :
            "style-loader",
            "css-loader",
            {
                loader: "postcss-loader",
                options: {
                    postcssOptions: {
                        ident: "postcss",
                        syntax: "postcss-scss",
                        plugins: [
                            require("postcss-import"),
                            require("tailwindcss"),
                            require("autoprefixer"),
                        ],
                    },
                },
            },
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: isProductionMode ? "[name].[contenthash].css" : "[name].css",
    }),
  ],
};

Answer 2

经过一些研究后，有两件事确实有帮助：

我开始使用angular.json中的默认@angular-devkit 包。这意味着可以消除 webpack 的整个增加的复杂性。一个好的指南是：https://dev.to/angular/setup-tailwindcss-in-angular-the-easy-way-1i5l。（如果发生此错误，这可能是您的解决方案）。
阅读 tailwindCSS 文档...https://tailwindcss.com/docs/upgrading-to-v2 显示 一些类已重命名 和其他一些类获得新值。

Answer 3

我遇到了这个问题。在我的例子中，我从另一个项目复制了我的配置，忘记安装 postcss-scss 作为开发依赖。 postcss 没有给出关于缺少节点模块的错误，而是默默地失败并抱怨 node.getIterator

在研究这个问题时，我从 postcss 的作者那里了解到，只有当 postcss 创建的 AST 树被插件以某种方式破坏时，你才会看到这个错误。发生这种情况的一种方式是，如果您的旧 postcss 插件是为 postcss 7 而不是最新的 postcss 8 设计的。另一种 AST 树可能中断的方式是插件完全未定义，这就是我忘记安装 postcss 时发生的情况-scss

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