0

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.

mrbinky3000
  • 4,055
  • 8
  • 43
  • 54
  • Can you set up a minimal GitHub repository with the crash so I can have a better look? Thanks. – Juho Vepsäläinen Feb 05 '21 at 07:06
  • Thanks for getting back to me @JuhoVepsäläinen . I found the problem. It was a problem with the configuration for loading javascript. I accidentally excluded "node-modules" instead of "node_modules". Which means babel was trying to transpile node modules. I have no idea why the error traceroute pointed to the mini-css-extract-plugin. – mrbinky3000 Feb 05 '21 at 21:06

0 Answers0