Webpack 5 and mini-css-extract-plugin fails with " TypeError: wellKnownSymbol is not a function"

Question

I'm trying to update a project to Webpack 5. mini-css-extract-plugin causes an error. When I use style-loader instead of mini-css-extract-plugin's loader, my project builds just fine. However, you shouldn't inline your CSS for production builds.

Here is a partial of my package.json file with the relevant modules.

{
  "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",
  },
}

This is my webpack configuration for handling SCSS and CSS files.

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(),
    ],
  };
};

This is an example of the errors I am getting. Every single style sheet file is failing in my project. Hundreds of errors (it's a large project).

  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)

This is the offending scss file.

.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;
}

Any help would be appreciated. I am following the book "SurviveJS - Webpack 5" and applying the lessons to that book to my existing project and completely re-doing my webpack config to match the book.

question from:https://stackoverflow.com/questions/66051045/webpack-5-and-mini-css-extract-plugin-fails-with-typeerror-wellknownsymbol-is

Answer 1

Waitting for answers