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

Erro ao executar com Babel 7

Boa noite, estou tendo problemas para executar o código da aula usando o babel 7. Essas são minhas minhas dependências.

"devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-proposal-decorators": "^7.4.4",
    "@babel/preset-env": "^7.5.5",
    "babel-loader": "^8.0.6",
    "babel-preset-es2017": "^6.24.1",
    "webpack": "^4.39.2",
    "webpack-cli": "^3.3.7"
  }

Esse é o código do meu arquivo .babelrc

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true }]
    ]
}

E esse do webpack.config.js

const path = require('path');

module.exports = {
    entry: './app-src/app.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: '/\.js$/',
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                    }
                }
            }
        ]
    }
}

Estou tendo o seguinte erro.

ERROR in ./app-src/controllers/NegociacaoController.js 5:0
Module parse failed: Unexpected character '@' (5:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import { getNegociacaoDao, Bind, getExceptionMessage, debounce, controller, bindEvent } from '../util/index.js';
|
> @controller('#data', '#quantidade', '#valor')
| export class NegociacaoController {
|
 @ ./app-src/app.js 1:0-77 4:23-43

Alguma ideia do que pode estar ocorrendo ?

5 respostas

Fala ai Rodrigo, tudo bem? Estranho, parece que seu arquivo não está sendo transpilado pelo Babel, não era para ele ter o @.

Tente adicionar os plugins do seu .babelrc direto no webpack.config.js dentro de options do babel-loader.

Talvez ele não esteja lendo o arquivo .babelrc (apenas um chute).

Nas versões novas do Webpack (4) é diferente as configurações, aqui eu fiz e funcionou corretamente.

Se quiser ver um simples exemplo do arquivo de configuração:

const HTMLWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const webpack = require('webpack')

const PUBLIC_DIR = 'public'

module.exports = {
    devServer: {
        contentBase: path.join(__dirname, PUBLIC_DIR),
        hot: true,
        port: 3340
    },
    entry: path.resolve(__dirname, 'src', 'main.js'),
    mode: 'development',
    module: {
        rules: [
            {
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: [
                        '@babel/preset-env'
                    ]
                },
                test: /\.js$/
            },
            {
                exclude: /node_modules/,
                test: /\.css$/,
                use: [
                    { loader: 'style-loader' },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true
                        }
                    }
                ]
            }
        ]
    },
    output: {
        filename: '[name]-[hash].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HTMLWebpackPlugin({
            template: path.resolve(__dirname, PUBLIC_DIR, 'index.html')
        }),
        new webpack.HotModuleReplacementPlugin()
    ],
    target: 'web'
}

Se preferir, compartilha o projeto comigo, isso pode ser feito através do Github ou Google Drive (zipado). Eu dou uma olhada por aqui com mais calma, até porque posso ter deixado passar algum pequeno detalhe apenas olhando os códigos que você mandou.

Espero ter ajudado.

Matheus o "@" vem do arquivo NegociacaoController.js, que chama a seguinte função @controller('#data', '#quantidade', '#valor'). Para ler esta está função foi utilizado o plugin plugin-proposal-decorators.

Por alguma razão o plugin não está conseguindo ler está função adequadamente. Aqui está o link do projeto.

https://drive.google.com/open?id=1LENmdYK__pi_O-UeiSwKpwWyHXAYSwZ8

solução!

Fala aí Rodrigo, tudo bem? Desculpa a demora, está corrido as coisas por aqui.

Bom, olhando seu projeto, o problema está no seu webpack.config.js, mais especificamente na configuração test do seu loader.

Configuração atual:

{
    test: '/\.js$/',
    exclude: /node_modules/,
    use: {
        loader: 'babel-loader',
        options: {
            presets: ['@babel/preset-env'],
        }
    }
}

Repare que no seu test você definiu a expressão regular como String, quando na verdade deveria ser sem as aspas simples:

Mudando de '/\.js$/' para /\.js$/.

Ficando da seguinte forma:

{
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
        loader: 'babel-loader',
        options: {
            presets: ['@babel/preset-env'],
        }
    }
}

Agora sim, ele vai aplicar o loader do Babel para seus arquivos .js.

Espero ter ajudado.

Obrigado pela ajuda. Deu tudo certo.

Magina Rodrigo, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.

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