Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Erro no start

Fiz as configurações no webpack.config.json:

const path = require("path");

module.exports={
    mode:"development",
    devServer:{
        open:true,
        contentBase:"dist",
    },
    entry:"./app/js/views/listagem-clientes.js",
    output:{
        filename:"main.js",
        path:path.resolve(__dirname,"dist")
    }
}

E no package.json:

{
  "name": "projetofetch",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --mode development",
    "build": "webpack --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.15.0",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.11.2"
  }
}

Entretando gerou esse log de erro, mas não sei o que pode ter gerado. Alguém já passou por isso? Como resolveu?

PS C:\Users\Raul\Desktop\FetchAPI\ProjetoFetch> npm start

> projetofetch@1.0.0 start C:\Users\Raul\Desktop\FetchAPI\ProjetoFetch
> webpack-dev-server --config ./webpack.config.js --mode development  

internal/modules/cjs/loader.js:638
    throw err;
    ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (C:\Users\Raul\Desktop\FetchAPI\ProjetoFetch\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! projetofetch@1.0.0 start: `webpack-dev-server --config ./webpack.config.js --mode development`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the projetofetch@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Raul\AppData\Roaming\npm-cache\_logs\2021-01-18T19_59_22_323Z-debug.log
PS C:\Users\Raul\Desktop\FetchAPI\ProjetoFetch> 
2 respostas

Para resolver:

Em webpack.config.js faça:

const path = require("path");

module.exports={
    mode:"development",
    devServer:{
        open:true,
        contentBase:"dist",
    },
    entry:"./app/js/views/listagem-clientes.js",
    output:{
        filename:"main.js",
        path:path.resolve(__dirname,"dist")
    }
}

Em package.json faça:

{
  "name": "projetofetch",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development --env development --hot --port 3000",
    "build": "webpack --config webpack.config.js",
    "dev": "webpack serve --mode development --env development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.15.0",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.11.2"
  }
}
solução!

Fala ai Raul, tudo bem? O problema é porque parece que seu projeto não tinha instalado a dependência webpack-cli.

Talvez faltou um npm i ou npm i -D webpack-cli@versao

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software