"TypeError: Invalid value used in weak set" while build using webpack

Question

I'm trying to add scss to the project. I want to build css files from scss ones, but I get an error that says "TypeError: Invalid value used in weak set" since I added MiniCssExtractPlugin. Here's my webpack.config.js:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const config = {
  // TODO: Add common Configuration
  module: {},
};

const js = Object.assign({}, config, {
  name: 'js',
  entry: path.resolve(__dirname, 'index.js'),
  output: {
    path: path.resolve(__dirname, '../some/path/here'),
    filename: 'main.js',
  },
});

const scss = Object.assign({}, config, {
  name: 'scss',
  entry: path.resolve(__dirname, './scss/styles.scss'),
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(s*)css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              implementation: require('sass'),
            },
          },
        ],
      },
    ],
  },
  output: {
    path: path.resolve(__dirname, '../some/path/here'),
    filename: 'styles.css',
  },
});

module.exports = [js, scss];

I googled a lot but didn't find any answers. I use Node.js v 8.4.0.

Console output (There is more, but I think this is enough):

TypeError: Invalid value used in weak set
    at WeakSet.add (native)
    at MiniCssExtractPlugin.apply (/path/path/path/path/path/path/path/node_modules/mini-css-extract-plugin/dist/index.js:362:18)

PS: I'm new to webpack, so I'll be glad if you help me to make this code better. The main idea is to keep js compilation the same and add scss compilation. I also want to compile included scss files as separated ones.

PSS: If you need more information, I'll provide some, coz idk what else can be useful.

Answer 1

Maybe the latest mini-css-extract-plugin version has bugs. And I tried to use another version of this package. And its Worked!!!

1. Remove your last package version:

    npm uninstall mini-css-extract-plugin
   

2. Download this version 0.9.0 (its worked for me):

    npm i --save-dev [email protected]
   

*optionally (--save-dev)

checkout all versions: mini-css-extract-plugin/all-versions

Answer 2

This is most likely due to either a bug or an incompatible version of webpack, e.g. upgrading to the current major v2.0.0 releases on webpack 4.

For more information, please check the changelog for breaking changes and fixes.