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)