Why is webpack serve throwing the error "You need to install 'webpack-dev-server' for running 'webpack serve'" while the dependency is installed?

Question

Problem:

I am trying to start my react application by running npm run start. This then throws the error "You need to install 'webpack-dev-server' for running 'webpack serve'" while I have the dependency 'webpack-dev-server' already installed.

What I have tried:

• I have tried multple times to remove my node_modules and package.lock.js file and running npm install again but without success. (I can also see webpack-dev-server installed in my node_modules folder)

• I have also tried the solution and suggestions of this question but without success: webpack-dev-server isn't working in my project

Useful information:

My console output:

❯ npm run start

> farma-form-vaccination-registration@0.1.0 start
> webpack serve --open --hot --config webpack.dev.js --node-env development --stats verbose

[webpack-cli] You need to install 'webpack-dev-server' for running 'webpack serve'.
TypeError: Cannot read properties of undefined (reading 'getArguments')

My package.json:

{
  "name": "farma-form-vaccination-registration",
  "version": "0.1.0",
  "homepage": ".",
  "private": true,
  "dependencies": {
    "@types/node": "^14.14.14",
    "antlr4": "^4.7.1",
    "html-to-react": "^1.4.7",
    "lodash": "^4.17.21",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-fhirclient": "^0.1.1",
    "semantic-ui-css": "^2.5.0",
    "semantic-ui-react": "^2.1.4"
  },
  "scripts": {
    "start": "webpack serve --open --hot --config webpack.dev.js --node-env development --stats verbose",
    "build": "webpack --config webpack.prod.js --node-env=production --stats-error-details",
    "test": "node scripts/test.js"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "IE 11"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "IE 11"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.21.0",
    "@babel/preset-env": "^7.18.2",
    "@typescript-eslint/eslint-plugin": "^5.55.0",
    "@typescript-eslint/parser": "^5.55.0",
    "babel-loader": "8.1.0",
    "babel-plugin-es6-promise": "^1.1.1",
    "babel-plugin-named-asset-import": "^0.3.7",
    "babel-plugin-react-css-modules": "^5.2.6",
    "babel-preset-react-app": "^10.0.0",
    "case-sensitive-paths-webpack-plugin": "2.3.0",
    "copy-webpack-plugin": "^11.0.0",
    "core-js": "^3.31.1",
    "css-loader": "4.3.0",
    "css-minimizer-webpack-plugin": "^4.2.2",
    "file-loader": "^6.1.1",
    "fs-extra": "^9.0.1",
    "html-webpack-plugin": "5.5.0",
    "html-webpack-tags-plugin": "3.0.2",
    "https-browserify": "^1.0.0",
    "lodash-webpack-plugin": "^0.11.6",
    "mini-css-extract-plugin": "2.7.2",
    "mini-svg-data-uri": "^1.4.4",
    "pnp-webpack-plugin": "1.6.4",
    "postcss-flexbugs-fixes": "5.0.2",
    "postcss-loader": "7.0.2",
    "postcss-normalize": "10.0.1",
    "postcss-preset-env": "8.0.1",
    "postcss-safe-parser": "6.0.0",
    "prettier": "^2.8.3",
    "querystring-es3": "^0.2.1",
    "react-dev-utils": "^11.0.3",
    "resolve": "1.18.1",
    "resolve-url-loader": "^5.0.0",
    "sass-loader": "^10.0.5",
    "semver": "7.3.2",
    "stream-http": "^3.2.0",
    "style-loader": "1.3.0",
    "terser-webpack-plugin": "5.3.6",
    "ts-pnp": "1.2.0",
    "url": "^0.11.0",
    "url-loader": "4.1.1",
    "webpack": "^5.75.0",
    "webpack-bundle-analyzer": "^4.8.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.15.1",
    "webpack-manifest-plugin": "5.0.0",
    "workbox-webpack-plugin": "6.5.4"
  }
}

My webpack.dev.js:

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { HotModuleReplacementPlugin } = require('webpack');

module.exports = merge(common, {
   mode: 'development',
   output: {
    path: path.resolve(__dirname, "dist"), // output folder
    publicPath: "/",
    //clean: true,
    filename: '[name].[contenthash:8].js',
  },
    module: {
        rules: [
          {
              test: /.s?css$/,
              use: [
                {
                loader: 'style-loader'
              }, 
              {
                loader: 'css-loader',
                
      
                },
               {
                loader: 'postcss-loader'
               }

            ],
          },
      ],
    },
devtool: 'inline-source-map',
   devServer: {
    static: {
        directory: path.resolve("dist"),        
      },
      devMiddleware: {
        writeToDisk: true,
      },
      port: 3000,
   },plugins: [

  ],
});

Node version:

❯ node --version
v16.15.1

Npm version:

❯ npm --version
9.8.1

Answer 1

In my case, I didn't have webpack and webpack-cli in my package.json