Webpack error (Yarn webpack-dev-server-mode Development)

Question

I’m trying to create my first Reactjs application.

When running on the bash terminal of Vscode the following command:

yarn webpack-dev-server --mode development

The following error appears:

$ yarn webpack-dev-server --mode development
yarn run v1.22.10
$ C:\tools\Cmder\react\node_modules\.bin\webpack-dev-server --mode development
node:internal/modules/cjs/loader:928
  throw err;
  ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'       
Require stack:
- C:\tools\Cmder\react\node_modules\webpack-dev-server\bin\webpack-dev-server.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:925:15)
    at Function.Module._load (node:internal/modules/cjs/loader:769:27)
    at Module.require (node:internal/modules/cjs/loader:997:19)    at require (node:internal/modules/cjs/helpers:92:18)       
    at Object.<anonymous> (C:\tools\Cmder\react\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
    at Module._compile (node:internal/modules/cjs/loader:1108:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
    at Module.load (node:internal/modules/cjs/loader:973:32)   
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\tools\\Cmder\\react\\node_modules\\webpack-dev-server\\bin\\webpack-dev-server.js'
  ]
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I’ve tried to put all scripts on package.json that I saw in stackoverflow and already installed the yarn in various ways.

My webpack.config.js looks like this:

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'src', 'index.js'),
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'public'),
  },
  module: {
    rules:[
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader:'babel-loader',
        }
      }
    ]
  }
};

Answer 1

Depending on the version of webpack-cli, has that Issue that explains some changes that have to be made according to the version.

Basically for the versions webpack 5.x and webpack-cli 4.x, the execution script webpack-dev-server should be replaced by webpack serve:

For webpack-cli 3.x:

"scripts": {
  "start:dev": "webpack-dev-server"
}

For webpack-cli 4.x:

"scripts": {
 "start:dev": "webpack serve"
}

_{Code snippet taken from Issue}

So you can test your script by changing from:

yarn webpack-dev-server --mode development

for:

yarn webpack serve --mode development