Webpack. Error: The module created for a LoaderDependency must have an original source

> [email protected] start C:\Users\User\Documents\dev\project1
> webpack-dev-server --mode development

i ｢wds｣: Project is running at http://localhost:8008/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\Users\User\Documents\dev\project1\dist
i ｢wds｣: 404s will fallback to /index.html
i ｢wdm｣: wait until bundle finished: /
C:\Users\User\Documents\dev\project1\node_modules\loader-runner\lib\LoaderRunner.js:127
                        throw e;
                        ^

Error: The module created for a LoaderDependency must have an original source
    at C:\Users\User\Documents\dev\project1\node_modules\webpack\lib\dependencies\LoaderPlugin.js:79:16
    at C:\Users\User\Documents\dev\project1\node_modules\webpack\lib\Compilation.js:1388:8
    at C:\Users\User\Documents\dev\project1\node_modules\webpack\lib\util\AsyncQueue.js:281:5
    at Hook.eval [as callAsync] (eval at create (C:\Users\User\Documents\dev\project1\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncQueue._handleResult (C:\Users\User\Documents\dev\project1\node_modules\webpack\lib\util\AsyncQueue.js:254:21)
    at C:\Users\User\Documents\dev\project1\node_modules\webpack\lib\util\AsyncQueue.js:237:11
    at C:\Users\User\Documents\dev\project1\node_modules\webpack\lib\Compilation.js:1110:15
    at C:\Users\User\Documents\dev\project1\node_modules\webpack\lib\HookWebpackError.js:69:3
    at Hook.eval [as callAsync] (eval at create (C:\Users\User\Documents\dev\project1\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Cache.store (C:\Users\User\Documents\dev\project1\node_modules\webpack\lib\Cache.js:107:20)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `webpack-dev-server --mode development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\User\AppData\Roaming\npm-cache\_logs\2020-11-18T15_53_11_241Z-debug.log

{
  "name": "project1",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "main": "src/index.js",
  "scripts": {
    "watch": "webpack --watch",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "babel-loader": "^8.2.1",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.1",
    "extract-loader": "^5.1.0",
    "file-loader": "^6.2.0",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.0",
    "mini-css-extract-plugin": "^1.3.1",
    "sass": "^1.29.0",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "webpack": "^5.4.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "lodash": "^4.17.20",
    "resolve-url-loader": "^3.1.2",
    "source-map": "^0.7.3"
  }
}

const path = require('path');
const devMode = process.env.NODE_ENV !== 'production';
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  entry: './src/index.js',

  output: 
    { 
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '',
  
  },


  mode: 'development',
    devServer: {
        historyApiFallback: true,
        contentBase: path.resolve(__dirname, './dist'),
        open: true,
        compress: true,
        hot: true,
        port: 8008,
    },

  plugins: [
    new MiniCssExtractPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'webpack Boilerplate',
      template: path.resolve(__dirname, './src/template.html'),
      filename: 'index.html',
    })
  ],

  resolve: {
    extensions: ['.js', '.jsx', '.css', 'cjs'],
    modules: [
      'node_modules'
    ]        
},

  module: {
  
    rules: [
     
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },

      {
        test: /\.html$/i,
        use: ['file-loader?name=[name].[ext]', 'extract-loader', 'html-loader'],
      },

      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          }
         ]
      },

      {
        test: /\.scss$/,
        use: [
          'style-loader',
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: { sourceMap: true }
          }, {
            loader: 'sass-loader',
            options: { sourceMap: true }
          }
        ]
      },
      
      {
        test: /\.(ttf|eot|png|img|jpg|ico|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader'
      },
      
    ],
    
  },
  
};