'webpack-dev-server' module not found

Question

While trying to execute yarn webpack-dev-server --mode development

the following error appears:

$ C:\Users\Coding\code\frontend\node_modules\.bin\webpack-dev-server --mode development
internal/modules/cjs/loader.js:883
  throw err;
  ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- C:\Users\Coding\code\frontend\node_modules\webpack-dev-server\bin\webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (C:\Users\Coding\code\frontend\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\Users\\Coding\\code\\frontend\\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.

Follow the contents of package.json

{
  "name": "frontend",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "@babel/cli": "^7.12.10",
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.17.0",
    "webpack-cli": "^4.4.0"
  },
  "devDependencies": {
    "webpack-dev-server": "^3.11.2"
  }
}

Also attached is the contents of webpack.config.js

module.exports ={
  entry: path.resolve(__dirname, 'src', 'index.js'),
  //Essa é uma forma diferente de inddicar a localização de um arquivo, visto que o windows tem uma forma diferente de mostrá-los, assim evitando erros. 
  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',
        }
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use:[
          {loader:'stye-loader'},
          {loader:'css-loader'},
        ]
      }
    ]
  },
};

Anyone who can help me, I thank you in advance.

Answer 1

You can compile your code in two ways:

Or you install the webpack-dev-server package globally:

npm i webpack-dev-server -g or yarn add global webpack-dev-server

Or you configure in your file package.json, in the "scripts" node an option to compile your code. Ex (summarized):

{
  "name": "frontend",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
      "dev": "yarn webpack-dev-server --mode development"
  }
   ....
}

When you create a "script" to compile your code, "npm"/"Yarn" will fetch the package webpack-dev-server in the briefcase node_modules.

When you try to run straight into the terminal yarn webpack-dev-server --mode development, your computer looks for a package called webpack-dev-server globally installed on your machine.

Answer 2

Your problem is the version of Webpack. In version 5, the command of dev-server mute. now you use:

yarn webpack serve --mode development

the configuration may be the same in webpack.config, but the command changes.

I had this problem but in the updated documentation it fixes.

https://webpack.js.org/configuration/dev-server/