Mini-css-extract-plugin: Sass doesn't not compiling in webpack 4

[athimannil]

I am getting error with webpack 4.41

Here is the current webpack configuration

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css'
});
const DIST_DIR = path.resolve(__dirname, 'dist');
const SRC_DIR = path.resolve(__dirname, 'src');

module.exports = {
entry: SRC_DIR + '/App.js',
output: {
filename: 'bundle.js',
path: DIST_DIR
},
devServer: {
contentBase: DIST_DIR,
hot: true
},
module: {
rules: [{
test: /.jsx?/,
use: ['babel-loader'],
exclude: /node_modules/
},

          {
              test: /\.scss$/,
              use: [{
                      loader: MiniCssExtractPlugin.loader,
                  },
                  'style-loader',
                  {
                      loader: 'css-loader',
                      options: {
                          minimize: true
                      }
                  },
                  'postcss-loader',
                  {
                      loader: 'sass-loader'
                  }
              ]
          },

          // {
          //   test: /\.(png|svg|jpg|gif)$/,
          //   use: [
          //     {
          //       test: 'file-loader',
          //       options: {
          //         name: '[name].[ext]',
          //         publicPath: 'img/'
          //       }
          //     }
          //   ]
          // },
          {
              test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
              use: [{
                  loader: 'file-loader',
                  options: {
                      name: '[name].[ext]',
                      outputPath: 'fonts/'
                  }
              }]
          },
          {
              test: /\.html$/,
              use: [{
                  loader: 'html-loader',
                  options: {
                      minimize: true
                  }
              }]
          }
      ]
  },
  plugins: [
      new webpack.DefinePlugin({
          'process.env.NODE_ENV': JSON.stringify('production')
      }),
      new webpack.NamedModulesPlugin(),
      new webpack.HotModuleReplacementPlugin(),
      new CleanWebpackPlugin(['dist']),
      new HtmlWebPackPlugin({
          title: 'Development',
          template: SRC_DIR + '/index.html'
      }),
      // new MiniCssExtractPlugin({
      //   filename: '[name].css',
      //   chunkFilename: '[id].css'
      // })
  ]

};

Not sure how to fix it 😞

[sokra]

remove the style-loader