title: Invalid configuration object(Webpack). Configuration.module.rules[2].loader should be a non-empty string
body: <p>I started the project and configured webpack, but after running command &quot;yarn start&quot; I get the following error:</p>
  <p>$ webpack-dev-server --mode=development</p>
  <p>[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.</p>
  <ul>
  <li>configuration.module.rules[2] should be one of these:
  [&quot;...&quot; | object { assert?, compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, scheme?, sideEffects?, test?, type?, use? }, ...]
  -&gt; A rule.
  Details:
  <ul>
  <li>configuration.module.rules[2].loader should be a non-empty string.
  -&gt; A loader request.</li>
  </ul>
  </li>
  </ul>
  <p>webpack.config.js:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const { merge } = require("webpack-merge");
  
  const commonConfiguration = require("./webpack/common");
  
  module.exports = (_env, { mode }) =&gt; {
    const properlyConfig = require(`./webpack/${mode}`);
    const mergedConfig = merge(commonConfiguration, properlyConfig);
  
    return mergedConfig;
  };</code></pre>
  </div>
  </div>
  </p>
  <p>common.js:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const path = require("path").resolve;
  const HtmlWebpackPlugin = require("html-webpack-plugin");
  
  module.exports = {
    entry: {
      index: path(__dirname, "..", "src", "index.js"),
    },
    output: {
      filename: "[name].[contenthash:6].js",
      path: path(__dirname, "..", "build"),
    },
    resolve: {
      extensions: [".js", ".jsx"],
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
          },
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: path(__dirname, "..", "public", "index.html"),
      }),
    ],
  };</code></pre>
  </div>
  </div>
  </p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>development.js:
  
  module.exports = {
    devServer: {
      contentBase: "./public",
      port: 3000,
    },
    devtool: "inline-source-map",
    module: {
      rules: [
        {
          test: /\.module\.s(a|c)ss$/,
          use: [
            "style-loader",
            {
              loader: "css-loader",
              options: {
                modules: {
                  localIdentName: "[local]",
                },
              },
            },
            {
              loader: "sass-loader",
              options: {
                sourceMap: true,
              },
            },
          ],
        },
        {
          test: /\.(s(a|c)ss|css)$/,
          exclude: /\.module\.(s(a|c)ss)$/,
          loader: [
            "style-loader",
            "css-loader",
            {
              loader: "sass-loader",
              options: {
                sourceMap: true,
              },
            },
          ],
        },
      ],
    },
  };</code></pre>
  </div>
  </div>
  </p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>production.js:
  
  const { CleanWebpackPlugin } = require("clean-webpack-plugin");
  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
  
  module.exports = {
    optimization: {
      minimizer: [new OptimizeCssAssetsWebpackPlugin({})],
    },
    module: {
      rules: [
        {
          test: /\.module\.(s(a|c)ss)$/,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: "css-loader",
              options: {
                modules: {
                  localIdentName: "[local]",
                },
              },
            },
            {
              loader: "sass-loader",
              options: {
                sourceMap: true,
              },
            },
          ],
        },
        {
          test: /\.(s(a|c)ss|css)$/,
          exclude: /\.module\.(s(a|c)ss)$/,
          loader: [
            MiniCssExtractPlugin.loader,
            "css-loader",
            {
              loader: "sass-loader",
              options: {
                sourceMap: true,
              },
            },
          ],
        },
      ],
    },
    plugins: [
      new CleanWebpackPlugin(),
      new MiniCssExtractPlugin({
        filename: "style.[contenthash:6].css",
        chunkFilename: "style.[contenthash:6].css",
        publicPath: "./",
      }),
    ],
  };</code></pre>
  </div>
  </div>
  </p>