'webpack-dev-server' module not found😡

[valteralvees]

Ao tentar executar yarn webpack-dev-server --mode development

o seguinte erro aparece:

$ 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.

Segue o conteúdo do 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"
  }
}

Em anexo, também, o conteúdo de 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'},
        ]
      }
    ]
  },
};

Quem puder me ajudar, agradeço desde já.

[wmartins]

Oi @valteralvees, dei uma procurada e parece ser alguma mudança nas versões de algum desses pacotes de webpack. Essa resposta no StackOverflow tem mais algumas informações:

https://stackoverflow.com/questions/59611597/error-cannot-find-module-webpack-cli-bin-config-yargs

Nesse link, a pessoa dá a dica de executar o seguinte comando:

webpack serve

No seu caso, talvez vale tentar executar:

yarn webpack serve

Ou

yarn webpack-cli serve

Acho que vale tentar. Vou criar um projeto local aqui com o seu package.json para ver se consigo reproduzir.

[wmartins]

Acho que o comando yarn webpack serve vai funcionar. Testei local e a princípio executou (só não tenho o código completo para ver o build inteiro). Só complementando, a princípio parece ser uma mudança na interação entre os pacotes webpack-dev-server e webpack-cli

webpack/webpack-dev-server#2759

A recomendação oficial é usar webpack serve mesmo. :)

[painlenk]

change de contentBase to static
exemple
devServer: {
static: path.resolve(__dirname, 'public'),

},