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
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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!