webpack - Webpack 5 と mini-css-extract-plugin が「 TypeError: wellKnownSymbol is not a function」で失敗する

Question

プロジェクトを Webpack 5 に更新しようとしてmini-css-extract-pluginいます。エラーが発生します。mini-css-extract-plugin のローダーの代わりに使用するstyle-loaderと、プロジェクトが正常にビルドされます。ただし、本番ビルド用に CSS をインライン化しないでください。

これは、関連するモジュールを含む私の package.json ファイルの一部です。

{
  "devDependencies": {
    "mini-css-extract-plugin": "^1.3.5",
    "node-sass": "^5.0.0",
    "sass": "^1.32.6",
    "sass-loader": "^10.1.1",
    "webpack": "^5.20.2",
  },
}

これは、SCSS および CSS ファイルを処理するための私の webpack 構成です。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

exports.extractStyles = ()) => {
  return {
    module: {
      rules: [
        {
          test: /\.(css|scss)$/,
          use: [
            {
              loader: MiniCssExtractPlugin.loader,
            },
            {
              loader: 'css-loader',
              options: {
                modules: true,
                importLoaders: 1,
                url: false,
              },
            },
            {
              loader: 'sass-loader',
            },
          ],
          sideEffects: true,
        }
      ]
    },
    plugins: [
      new MiniCssExtractPlugin(),
    ],
  };
};

これは私が得ているエラーの例です。私のプロジェクトでは、すべてのスタイル シート ファイルが失敗しています。何百ものエラー (大規模なプロジェクトです)。

  ERROR in ./app/pages/404/404.scss
  Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
  TypeError: wellKnownSymbol is not a function
      at Object.8191 (/homedir/my_project/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!/homedir/my_project/node_modules/sass-loader/dist/cjs.js!/homedir/my_project/app/pages/404/404.scss:3554:21)
      at __webpack_require__ (/homedir/my_project/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!/homedir/my_project/node_modules/sass-loader/dist/cjs.js!/homedir/my_project/app/pages/404/404.scss:5776:41)
      at Object.6394 (/homedir/my_project/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!/homedir/my_project/node_modules/sass-loader/dist/cjs.js!/homedir/my_project/app/pages/404/404.scss:4325:29)
      at __webpack_require__ (/homedir/my_project/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!/homedir/my_project/node_modules/sass-loader/dist/cjs.js!/homedir/my_project/app/pages/404/404.scss:5776:41)
      at Object.3649 (/homedir/my_project/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!/homedir/my_project/node_modules/sass-loader/dist/cjs.js!/homedir/my_project/app/pages/404/404.scss:3633:96)
      at __webpack_require__ (/homedir/my_project/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!/homedir/my_project/node_modules/sass-loader/dist/cjs.js!/homedir/my_project/app/pages/404/404.scss:5776:41)
      at Object.491 (/homedir/my_project/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!/homedir/my_project/node_modules/sass-loader/dist/cjs.js!/homedir/my_project/app/pages/404/404.scss:3620:23)
      at __webpack_require__ (/homedir/my_project/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!/homedir/my_project/node_modules/sass-loader/dist/cjs.js!/homedir/my_project/app/pages/404/404.scss:5776:41)
      at Object.2219 (/homedir/my_project/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!/homedir/my_project/node_modules/sass-loader/dist/cjs.js!/homedir/my_project/app/pages/404/404.scss:1272:36)
      at __webpack_require__ (/homedir/my_project/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!/homedir/my_project/node_modules/sass-loader/dist/cjs.js!/homedir/my_project/app/pages/404/404.scss:5776:41)

これが問題の scss ファイルです。

.container {
  padding-top: 1.6rem;
  padding-right: 1.6rem;
  padding-bottom: 3rem;
  padding-left: 1.6rem;
  margin: auto;
  text-align: center;
}

.button {
  margin: 0.5rem;
  text-decoration: none;
}

.text {
  margin: 3rem 0 6rem 0;
}

どんな助けでも大歓迎です。私は本「SurviveJS - Webpack 5」に従い、その本へのレッスンを既存のプロジェクトに適用し、本と一致するようにwebpack構成を完全にやり直しています。