Bom dia, tenho uma dúvida, ao final das instruções, depois de executar "npm run build-dev"(gerou bundle.js) e o servidor escuta a porta 3000, o botão importar negociações não funciona. Obrigado
Bom dia, tenho uma dúvida, ao final das instruções, depois de executar "npm run build-dev"(gerou bundle.js) e o servidor escuta a porta 3000, o botão importar negociações não funciona. Obrigado
Oi, Carlos, tudo bem?
Você recebeu alguma mensagem de erro no console do navegador quando tentou importar as negociacções? Se sim, compartilha a mensagem. Ou caso prefira compartilha o seu webpack.config.js
e o package.json
para que possa testar aqui.
Tudo bem! Não recebi nenhuma mensagem de erro, continuei e estou na aula 4 (atividade 3) no minuto 10:10 digitar npm start a aplicação está sem configuração do css .
webpack.config.js
const path = require('path');
const babiliPlugin = require('babili-webpack-plugin');
let plugins = [];
if (process.env.NODE_ENV == 'production') {
plugins.push(new babiliPlugin());
}
module.exports = {
entry: './app-src/app.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: 'dist'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
}
]
},
plugins
}
package.json
{
"name": "client",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build-dev": "webpack --config webpack.config.js",
"build-prod": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"bootstrap": "^3.3.7",
"reflect-metadata": "^0.1.10"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2017": "^6.24.1",
"babili-webpack-plugin": "^0.1.1",
"cross-env": "^5.0.1",
"css-loader": "^0.28.4",
"file-loader": "^0.11.2",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"webpack": "^3.1.0",
"webpack-dev-server": "^2.5.1"
}
}
Está aparecendo a tabela, mesmo vazia?
Iniciou o servidor 3000 com npm start
na pasta ./server
?
Sim, utilizando 2 abas do powershell, na porta 8080 só aparece os botões (não funcionam) , e as caixas de texto, a tabela não aparece.
Provavelmente é algum problema no babel, que não está transcompilando a parte do código da tabela que tem os decorators.
Como está sua configuração do babel? .babelrc
Cola aí pra gente
{
"presets":["es2017"],
"plugins" : ["transform-decorators-legacy"]
}
Estranho, está importando certinho os arquivos gerados pelo webpack no index.html ?
Project is running at http://localhost:8080/
webpack output is served from /dist
Hash: a3e1df7fd9430aebff8e
Version: webpack 3.1.0
Time: 1407ms
Asset Size Chunks Chunk Names
f4769f9bdb7466be65088239c12046d1.eot 20.1 kB [emitted]
448c34a56d699c29117adc64c43affeb.woff2 18 kB [emitted]
fa2772327f55d8198301fdb8bcfc8158.woff 23.4 kB [emitted]
e18bbf611f2a2e43afc071aa2f4e1512.ttf 45.4 kB [emitted]
89889688147bd7575d6327160d64e760.svg 109 kB [emitted]
bundle.js 556 kB 0 [emitted] [big] main
[19] ./app-src/domain/negociacao/Negociacao.js 719 bytes {0} [built]
[20] ./app-src/util/index.js 374 bytes {0} [built]
[38] ./app-src/domain/index.js 186 bytes {0} [built]
[41] ./app-src/domain/negociacao/NegociacaoDao.js 1.92 kB {0} [built]
[48] multi (webpack)-dev-server/client?http://localhost:8080 ./app-src/app.js 40 bytes {0} [built]
[49] (webpack)-dev-server/client?http://localhost:8080 5.59 kB {0} [built]
[50] ./node_modules/url/url.js 23.3 kB {0} [built]
[56] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
[58] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]
[90] (webpack)-dev-server/client/overlay.js 3.6 kB {0} [built]
[96] (webpack)/hot/emitter.js 77 bytes {0} [built]
[98] ./app-src/app.js 624 bytes {0} [built]
[99] ./app-src/controllers/NegociacaoController.js 5.72 kB {0} [built]
[112] ./node_modules/bootstrap/dist/css/bootstrap.css 984 bytes {0} [built]
[119] ./node_modules/bootstrap/dist/css/bootstrap-theme.css 1 kB {0} [built]
+ 106 hidden modules
webpack: Compiled successfully.
O seu html está com
...
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="dist/bundle.js"></script>
...
?
Sim.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Negociações</title>
</head>
<body class="container">
<h1 class="text-center">Negociações</h1>
<div id="mensagemView"></div>
<form class="form">
<div class="form-group">
<label for="data">Data</label>
<input type="text" id="data" class="form-control" required autofocus/>
</div>
<div class="form-group">
<label for="quantidade">Quantidade</label>
<input type="number" min="1" step="1" id="quantidade" class="form-control" value="1" required/>
</div>
<div class="form-group">
<label for="valor">Valor</label>
<input id="valor" type="number" class="form-control" min="0.01" step="0.01" value="0.0" required />
</div>
<button class="btn btn-primary" type="submit">Incluir</button>
</form>
<div class="text-center">
<button id="botao-importa" class="btn btn-primary text-center" type="button">
Importar Negociações
</button>
<button id="botao-apaga" class="btn btn-primary text-center" type="button">
Apagar
</button>
</div>
<br>
<br>
<div id="negociacoes"></div>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script>src="dist/bundle.js"</script>
</body>
</html>
Está aí seu problema, precisa corrigir a tag! 👍 o src está fora da tag
Passei a tarde toda procurando o erro, muito obrigado!