2

Fiz todas as configurações necessárias do WebPack e o projeto inicia, porém aparentemente não roda o css no projeto e só fica uma tela em branco. Antes das configurações do WebPack meu Package.json era da seguinte forma:

    {
  "name": "marketHub-Client",
  "version": "1.2.0",
  "private": true,
  "dependencies": {
    "base-64": "^0.1.0",
    "bootstrap": "^4.3.1",
    "chartist": "^0.11.0",
    "http-proxy-middleware": "^0.19.1",
    "node-sass": "^4.11.0",
    "node-sass-chokidar": "^1.3.4",
    "npm-run-all": "^4.1.5",
    "react": "^16.8.4",
    "react-bootstrap": "0.32.0",
    "react-chartist": "^0.13.3",
    "react-dom": "^16.8.4",
    "react-google-maps": "^9.4.5",
    "react-iframe": "^1.8.0",
    "react-infinite-scroll-component": "^4.5.2",
    "react-notification-system": "^0.2.17",
    "react-router-dom": "^4.3.1",
    "react-scripts": "^3.0.1",
    "reactstrap": "^7.1.0"
  },
  "scripts": {
    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build": "npm run build-css && react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "prop-types": "^15.7.2"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Depois ficou desta forma:

    {
  "name": "marketHub-Client",
  "version": "1.2.0",
  "private": true,
  "dependencies": {
    "base-64": "^0.1.0",
    "bootstrap": "^4.3.1",
    "chartist": "^0.11.0",
    "http-proxy-middleware": "^0.19.1",
    "material-design-icons-iconfont": "^5.0.1",
    "node-sass": "^4.11.0",
    "node-sass-chokidar": "^1.3.4",
    "npm-run-all": "^4.1.5",
    "react": "^16.8.4",
    "react-bootstrap": "0.32.0",
    "react-chartist": "^0.13.3",
    "react-dom": "^16.8.4",
    "react-google-maps": "^9.4.5",
    "react-iframe": "^1.8.0",
    "react-infinite-scroll-component": "^4.5.2",
    "react-notification-system": "^0.2.17",
    "react-router-dom": "^4.3.1",
    "react-scripts": "^3.0.1",
    "reactstrap": "^7.1.0"
  },
  "main": "webpack.config.js",
  "scripts": {
    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
    "start-js": "react-scripts start",
    "start": "webpack-dev-server --open --hot --mode development && watch-css start-js",
    "build": "webpack --mode production && npm run build-css && react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/preset-env": "^7.4.2",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.8.0"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Acredito que o erro esteja na execução do script onde diz:

"start": "webpack-dev-server --open --hot --mode development && watch-css start-js"

Porém não sei como configurar.

Meu WebPack ficou da seguinte forma:

    const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  stats: {
    children: false
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin(),
    new HtmlWebPackPlugin({
      template: './public/index.html',
      filename: "./index.html"
    })
  ]
};

Alterando o script do package.json para não rodar o webpack o projeto inicia normalmente e roda toda a tela, porém da forma que está no package.json e apresentado o erro da seguinte forma no console:

 px-xl-5{padding-right:3rem!important}.pb-xl-5,.py-xl-5{padding-bottom:3rem!important}.pl-xl-5,.px-xl-5{padding-left:3rem!important}.m-xl-n1{margin:-.25rem!important}.mt-xl-n1,.my-xl-n1{margin-top:-.25rem!important}.mr-xl-n1,.mx-xl-n1{margin-right:-.25rem!important}.mb-xl-n1,.my-xl-n1{margin-bottom:-.25rem!important}.ml-xl-n1,.mx-xl-n1{margin-left:-.25rem!important}.m-xl-n2{margin:-.5rem!important}.mt-xl-n2,.my-xl-n2{margin-top:-.5rem!important}.mr-xl-n2,.mx-xl-n2{margin-right:-.5rem!important}.mb-xl-n2,.my-xl-n2{margin-bottom:-.5rem!important}.ml-xl-n2,.mx-xl-n2{margin-left:-.5rem!important}.m-xl-n3{margin:-1rem!important}.mt-xl-n3,.my-xl-n3{margin-top:-1rem!important}.mr-xl-n3,.mx-xl-n3{margin-right:-1rem!important}.mb-xl-n3,.my-xl-n3{margin-bottom:-1rem!important}.ml-xl-n3,.mx-xl-n3{margin-left:-1rem!important}.m-xl-n4{margin:-1.5rem!important}.mt-xl-n4,.my-xl-n4{margin-top:-1.5rem!important}.mr-xl-n4,.mx-xl-n4{margin-right:-1.5rem!important}.mb-xl-n4,.my-xl-n4{margin-bottom:-1.5rem!important}.ml-xl-n4,.mx-xl-n4{margin-left:-1.5rem!important}.m-xl-n5{margin:-3rem!important}.mt-xl-n5,.my-xl-n5{margin-top:-3rem!important}.mr-xl-n5,.mx-xl-n5{margin-right:-3rem!important}.mb-xl-n5,.my-xl-n5{margin-bottom:-3rem!important}.ml-xl-n5,.mx-xl-n5{margin-left:-3rem!important}.m-xl-auto{margin:auto!important}.mt-xl-auto,.my-xl-auto{margin-top:auto!important}.mr-xl-auto,.mx-xl-auto{margin-right:auto!important}.mb-xl-auto,.my-xl-auto{margin-bottom:auto!important}.ml-xl-auto,.mx-xl-auto{margin-left:auto!important}}.text-monospace{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace!important}.text-justify{text-align:justify!important}.text-wrap{white-space:normal!important}.text-nowrap{white-space:nowrap!important}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}@media (min-width:576px){.text-sm-left{text-align:left!important}.text-sm-right{text-align:right!important}.text-sm-center{text-align:center!important}}@media (min-width:768px){.text-md-left{text-align:left!important}.text-md-right{text-align:right!important}.text-md-center{text-align:center!important}}@media (min-width:992px){.text-lg-left{text-align:left!important}.text-lg-right{text-align:right!important}.text-lg-center{text-align:center!important}}@media (min-width:1200px){.text-xl-left{text-align:left!important}.text-xl-right{text-align:right!important}.text-xl-center{text-align:center!important}}.text-lowercase{text-transform:lowercase!important}.text-uppercase{text-transform:uppercase!important}.text-capitalize{text-transform:capitalize!important}.font-weight-light{font-weight:300!important}.font-weight-lighter{font-weight:lighter!important}.font-weight-normal{font-weight:400!important}.font-weight-bold{font-weight:700!important}.font-weight-bolder{font-weight:bolder!important}.font-italic{font-style:italic!important}.text-white{color:#fff!important}.text-primary{color:#007bff!important}a.text-primary:focus,a.text-primary:hover{color:#0056b3!important}.text-secondary{color:#6c757d!important}a.text-secondary:focus,a.text-secondary:hover{color:#494f54!important}.text-success{color:#28a745!important}a.text-success:focus,a.text-success:hover{color:#19692c!important}.text-info{color:#17a2b8!important}a.text-info:focus,a.text-info:hover{color:#0f6674!important}.text-warning{color:#ffc107!important}a.text-warning:focus,a.text-warning:hover{color:#ba8b00!important}.text-danger{color:#dc3545!important}a.text-danger:focus,a.text-danger:hover{color:#a71d2a!important}.text-light{color:#f8f9fa!important}a.text-light:focus,a.text-light:hover{color:#cbd3da!important}.text-dark{color:#343a40!important}a.text-dark:focus,a.text-dark:hover{color:#121416!important}.text-body{color:#212529!important}.text-muted{color:#6c757d!important}.text-black-50{color:rgba(0,0,0,.5)!important}.text-white-50{color:rgba(255,255,255,.5)!important}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.text-decoration-none{text-decoration:none!important}.text-break{word-break:break-word!important;overflow-wrap:break-word!important}.text-reset{color:inherit!important}.visible{visibility:visible!important}.invisible{visibility:hidden!important}@media print{*,::after,::before{text-shadow:none!important;box-shadow:none!important}a:not(.btn){text-decoration:underline}abbr[title]::after{content:" (" attr(title) ")"}pre{white-space:pre-wrap!important}blockquote,pre{border:1px solid #adb5bd;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}@page{size:a3}body{min-width:992px!important}.container{min-width:992px!important}.navbar{display:none}.badge{border:1px solid #000}.table{border-collapse:collapse!important}.table td,.table th{background-color:#fff!important}.table-bordered td,.table-bordered th{border:1px solid #dee2e6!important}.table-dark{color:inherit}.table-dark tbody+tbody,.table-dark td,.table-dark th,.table-dark thead th{border-color:#dee2e6}.table .thead-dark th{color:inherit;border-color:#dee2e6}}
| /*# sourceMappingURL=bootstrap.min.css.map */
 @ ./src/index.js 6:0-46
i 「wdm」: Failed to compile.
URIError: Failed to decode param '/%PUBLIC_URL%/logo.png'
    at decodeURIComponent (<anonymous>)
    at decode_param (C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\router\layer.js:172:12)
    at Layer.match (C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\router\layer.js:123:27)
    at matchLayer (C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\router\index.js:574:18)
    at next (C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\router\index.js:220:15)
    at expressInit (C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\middleware\init.js:40:5)
    at Layer.handle [as handle_request] (C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\router\index.js:317:13)
    at C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\router\index.js:284:7
    at Function.process_params (C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\router\index.js:335:12)
URIError: Failed to decode param '/%PUBLIC_URL%/manifest.json'
    at decodeURIComponent (<anonymous>)
    at decode_param (C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\router\layer.js:172:12)
    at Layer.match (C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\router\layer.js:123:27)
    at matchLayer (C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\router\index.js:574:18)
    at next (C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\router\index.js:220:15)
    at expressInit (C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\middleware\init.js:40:5)
    at Layer.handle [as handle_request] (C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\router\index.js:317:13)
    at C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\router\index.js:284:7
    at Function.process_params (C:\Users\Tiago Albuquerque\Desktop\MarketHub Backup\12-05-2019\MarketHubProject\marketHub-Client\node_modules\express\lib\router\index.js:335:12)
5
  • Olá! Não estou vendo ali um loader para css e jpg igual tem para o html e para o babel. Você não esqueceu de colocar? Veja que no erro ele diz que não achou um decode para o png Commented 27/08/2019 às 19:37
  • Olá! Não coloquei mesmo. No caso saberia me dizer como deveria ser esse loader pro css e pro jpg? Preciso instalar algum especifico pra eles? Não consegui entender muito bem a configuração do webpack ainda. Commented 28/08/2019 às 14:04
  • Sim, o Webpack é complicado pra entender e configurar no início. Eu na verdade não uso muito, mas trabalho com um projeto em que as vezes é preciso carregar algum loader específico. A documentação oficial pode ajudar: webpack.js.org/guides/asset-management/#loading-images Commented 29/08/2019 às 4:13
  • Certo! Vou tentar dar mais uma olhada nessa documentação e tentar novamente. Obrigado pela resposta! Commented 29/08/2019 às 12:13
  • Certo, me avise se tiver dado certo. Nesse link te passei vai direto pra onde tem esse loader de imagem. Boa sorte e sucesso. Commented 29/08/2019 às 14:28

0

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

Pesquise outras perguntas com a tag .