webpack - Webpack 5 和 mini-css-extract-plugin 失败并显示“TypeError: wellKnownSymbol is not a function”

Question

我正在尝试将项目更新到 Webpack 5。mini-css-extract-plugin导致错误。当我使用style-loader而不是 mini-css-extract-plugin 的加载器时，我的项目构建得很好。但是，您不应该将 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 配置以匹配这本书。

标签： webpackmini-css-extract-pluginsurvivejs