TypeError: this.getOptions is not a function at Object.loader

Question

(https://i.stack.imgur.com/IEmJ3.png) here is text of it

ERROR in ./src/components/App.scss
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader

I got this error message when I had done npm run build.

below I had pasted my Webpack config, here testLoader is custom loader error is not because of testLoader, it's because of I had imported a css file into my App.js of react(it's basically giving error when I have a css file imported)

(https://i.stack.imgur.com/wWDtV.png). If someone knows how to resolve it please let me know.

here is code if image there is trouble in seeing the image.

const merge = require("webpack-merge");
const common = require("./webpack.common.js");
const path = require("path");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const ManifestPlugin = require("webpack-manifest-plugin");
const BundleAnalyzerPlugin =
  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const webpack = require("webpack");
const enableBundleAnalyzer = process.env.ENABLE_ANALYZER === "true";

const loadersPath = path.resolve(__dirname, "../loaders");

module.exports = merge(common, {
  mode: "production",
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.(js)$/,
        use: { loader: path.resolve(loadersPath, "testLoader.js") },
      },
      {
        test: /\.s?(a|c)ss$/,
        use: [{ loader: "css-loader" }, { loader: "sass-loader" }],
      },
    ],
  },
  optimization: {
    splitChunks: {
      chunks: "all",
    },
    runtimeChunk: false,
  },
  plugins: [
    new CleanWebpackPlugin([path.resolve(__dirname, "../dist")], {
      root: process.cwd(),
      verbose: true,
      dry: false,
    }),
    new OptimizeCssAssetsPlugin(),
    new MiniCssExtractPlugin({
      filename: "[name].[hash:8].css",
      chunkFilename: "[id].[hash:8].css",
    }),
    new ManifestPlugin(),
    new BundleAnalyzerPlugin({
      analyzerMode: enableBundleAnalyzer === true ? "static" : "disabled",
      openAnalyzer: true,
    }),
  ],
});

I had seen some posts where they said it's because of same loader executing two times, but it's not my case.

Answer 1

From the screenshots, I assume you are using Webpack v4

To use the latest version of css-loader, webpack@5 is required