Webpack dev server initialization problem

When I write npm run dev in cmd, it is giving me following error:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schem
a.

Full Trace:

- configuration.module.rules[1].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.module.rules[1].use[0] should be a string.
    * configuration.module.rules[1].use[0] should be an instance of function
    * configuration.module.rules[1].use[0] should be an object.
    * configuration.module.rules[1].use[0] should be one of these:
      non-empty string | function | object { ident?, loader?, options?, query? }
    * configuration.module.rules[1].use[0] should be one of these:
      non-empty string | function | object { ident?, loader?, options?, query? }
      -> An use item

My webpack configuration file:

const path = require("path");
const extractCssPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

const JS_DIR = path.resolve(__dirname, "js");
const BUILD = path.resolve(__dirname, "build");

// Entry point of our JS
entry = {
    main: JS_DIR + "main.js",
};

// Entry point of the output
output = {
    path: BUILD,
    filename: 'js/[name].js'
};

// Rules for the webpack

const rules = [

    // Rule for the JavaScript
    {
        test: /\.js$/,
        include: [ JS_DIR ],
        exclude: /node_modules/,
        use: 'babel-loader' 
    },

    // Rule for the scss
    {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: [
            extractCssPlugin.load,
            "css-loader"
        ] 
    },

    // Rule for the images
    {
        test: /\.(png|jpg|jpeg)$/,
        use: [
            {
                loader: "file-loader",
                options: {
                    name: "[path][name].[ext]",
                    publicPath: ( process.env.NODE_ENV === "production" ) ? "../" : "../../"
                }
            }
        ] 
    }
]


// Defining the plugins 

const plugins = argv => {
    return [
        new CleanWebpackPlugin({
            cleanStaleWebpackAssets: argv.mode === "production"
        }),
        new extractCssPlugin({
            filename: "css/[name].css"
        })
    ]
}

module.exports = ( env, argv ) => {
    return {
        entry: entry,
        output: output,
        module: {
            rules: rules
        },
        plugins: plugins( argv )
    }
}

Strangely dev server is running perfectly in my Laptop but not in my Computer even though I installed all required packages. What is wrong in my code?

Looking at your webpack configuration, I can see that the issue is in this part:

// Rule for the scss
{
    test: /\.scss$/,
    exclude: /node_modules/,
    use: [
        extractCssPlugin.load,
        "css-loader"
    ] 
},

The problem here is that you are using extractCssPlugin.load as a value in the use array, which is causing the error. Instead, based on the offical docs for mini-css-extract-plugin you should use the MiniCssExtractPlugin.loader reference from the extractCssPlugin object.

Here's how you should modify the SCSS rule:

// Rule for the scss
{
    test: /\.scss$/,
    exclude: /node_modules/,
    use: [
        MiniCssExtractPlugin.loader,
        "css-loader"
    ] 
},

Make sure you also have the necessary imports at the top of your webpack configuration file:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

I hope this should resolve the issue with the SCSS rule and help you get the webpack dev server running on your computer as well.