Npm buid fails when using material design webpack server setup

Question

I am integrating Material Design components by Using MDC Web with Sass and ES2015 method as outlined here, https://material.io/develop/web/docs/getting-started/

The following node dependencies are required,

webpack: Bundles Sass and JavaScript
webpack-dev-server: Development server
sass-loader: Loads a Sass file and compiles it to CSS
node-sass: Provides binding for Node.js to Sass, peer dependency to sass-loader
css-loader: Resolves CSS @import and url() paths
extract-loader: Extracts the CSS into a .css file
file-loader: Serves the .css file as a public URL

I have node.js installed in my machine. I opened up my command prompt in my workspace and then followed the above material design guide, installed all modules and the above dependencies in the project folder itself,

I get this error when I build my project by using npm run build,

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration[0].module.rules[0].use should be one of these:
   non-empty string | function | object { ident?, loader?, options?, query? } | function | [non-empty string | function | object { ident?, loader?, options?, query? }]
   -> Modifiers applied to the module when rule is matched
   Details:
    * configuration[0].module.rules[0].use[4] should be a string.
    * configuration[0].module.rules[0].use[4] should be an instance of function
    * configuration[0].module.rules[0].use[4] should be an object.
    * configuration[0].module.rules[0].use[4] should be one of these:
      non-empty string | function | object { ident?, loader?, options?, query? }
    * configuration[0].module.rules[0].use[4] should be one of these:
      non-empty string | function | object { ident?, loader?, options?, query? }
      -> An use item
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sampleproject@1.0.0 build: `webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the sampleproject@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

the below is my webpack.config.js file,

const autoprefixer = require('autoprefixer');
const path = require("path");

function tryResolve_(url, sourceFilename) {
  // Put require.resolve in a try/catch to avoid node-sass failing with cryptic libsass errors
  // when the importer throws
  try {
    return require.resolve(url, { paths: [path.dirname(sourceFilename)] });
  } catch (e) {
    return "";
  }
}

function tryResolveScss(url, sourceFilename) {
  // Support omission of .scss and leading _
  const normalizedUrl = url.endsWith(".scss") ? url : `${url}.scss`;
  return (
    tryResolve_(normalizedUrl, sourceFilename) ||
    tryResolve_(
      path.join(
        path.dirname(normalizedUrl),
        `_${path.basename(normalizedUrl)}`
      ),
      sourceFilename
    )
  );
}

function materialImporter(url, prev) {
  if (url.startsWith("@material")) {
    const resolved = tryResolveScss(url, prev);
    return { file: resolved || url };
  }
  return { file: url };
}
module.exports = [{
    entry: ['./app.scss','./app.js'],
    output: {
      // This is necessary for webpack to compile
      // But we never use style-bundle.js
      filename: 'bundle.js',
    },
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
          {
            loader: 'file-loader',
            options: {
              name: 'bundle.css',
            },
          },
          { loader: 'extract-loader' },
      { loader: 'css-loader' },     
      {
        loader: 'postcss-loader',
        options: {
           plugins: () => [autoprefixer()]
        }
      }, 
            {
              loader: 'sass-loader',
              options: {
                importer: materialImporter
              },
              options: {                   
                sassOptions: {
                  includePaths: ['./node_modules']
                },
                name: 'bundle.css',
              },
            },
            ,
          {            
            loader: 'babel-loader',
            query: {
              presets: ['@babel/preset-env'],
            },
          }
          ]
        }
      ]
    },
  }];

Options I have tried,

Added a Sass importer but still I got the above error, Setting up webpack 4.0 to use Google material design SASS with ExtractTextPlugin

Configuring a Sass Importer for Nested node_modules in this link, https://material.io/develop/web/docs/getting-started/