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

npm run build-dev

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

13 respostas

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>
solução!

Está aí seu problema, precisa corrigir a tag! 👍 o src está fora da tag

Passei a tarde toda procurando o erro, muito obrigado!

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