1

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

2 Respostas 2

0

Você pode compilar de duas formas o seu código:

Ou você instala o pacote webpack-dev-server global:

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

Ou você configura no seu arquivo package.json, no nó "scripts" uma opção para compilar o seu código. Ex (resumido):

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

Quando você cria um "script" para compilar seu código, o "npm"/"yarn" vai buscar o pacote webpack-dev-server na pasta node_modules.

Quando você tenta executar direto no terminal yarn webpack-dev-server --mode development, o seu computador busca por uma pacote denominado webpack-dev-server instalado globalmente na sua máquina.

0

O seu problema é a versão do Webpack. Na versão 5, o comando do dev-server muda. agora vc usa:

yarn webpack serve --mode development

a configuração pode ser a mesma no webpack.config, mas o comando muda.

tive esse problema mas na documentação atualizada ele corrige.

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .