Erro ao migrar a aplicação para modulo do ES6

Boa noite, Rodrigo! Como vai?

Aparentemente o que está acontecendo é que vc está requisitando o arquivo traceur.js, localizando em http://localhost:3000 e ele não está sendo localizado, por isso o erro 404.

Esse arquivo existe realmente? Qual a localização dele?

Boa noite Gabriel,

Eu não sei a localização de tal arquivo até porque eu não o estou requisitando. Isso começou a acontecer depois da migração do projeto para módulos ES6.

Parecer ser alguma coisa vinculada ao system.js, mas eu não o conheço suficiente para ter certeza disso.

Quando pesquiso no Google sobre isso só retornam links relacionados com Angular e não é o caso aqui.

O problema é a não adequação dos módulos através do babel. O babel não fez as transformações necessárias. Daí o system.js tentará fazer a transcompilação no navegador através da biblioteca traceur. Como não há essa biblioteca, você terá esse erro.

Revise a configuração de babel no seu projeto e se todos os plugins de transformações necessários foram configurados.

Estou com o mesmo problema, já revisei as configurações e pesquisando não encontrei nada.

.babelrc

{
    "presets": [
        "es2015"
    ],
    "plugins": [
        "transform-es2015-modules-systemjs"
    ]
}

boot.js

import {NegociacaoController} from './controllers/NegociacaoController';
import {} from './polyfill/fetch';

let negociacaoController = new NegociacaoController();

document.querySelector('.form').onsubmit = negociacaoController.adiciona.bind(negociacaoController);
document.querySelector('[type=button]').onclick = negociacaoController.apaga.bind(negociacaoController);

Baixando o projeto final, vi esse trecho diferente na negociacaoController, modifiquei e agora funciona. Tirei o export da classe e adicionei o trecho abaixo:

let negociacaoController = new NegociacaoController();

export function currentInstance() {

    return negociacaoController;
}

O código do projeto final segue o código do capítulo

https://cursos.alura.com.br/course/javascript-es6-orientacao-a-objetos-parte-3/task/20304

Chegou a conferir lá? Qualquer coisa nos avise.

Já revisei as configurações do Babel e não encontrei nenhum problema. Meu código já não estava exportando a classe e sim a função currentInstance como relatou o Henrique Andrade. No entanto, continua não funcionando.

Dei uma olhada no código gerado pela transpilação realizada pelo Babel e o código está exatamente como o do ES6, apenas foi criado adicionalmente o arquivo map.

Alguma dica para identificar o por quê de o Babel não estar transpilando, além das configurações do arquivo .babelrc?

Compartilhe seu projeto no git. Assim podemos ver com mais clareza onde está o problema. Fique tranquilo que mais de 4000 alunos terminaram o curso sem problema algum, vamos descobrir.

Rodrigo, eu percebi que havia comido bola legal numa coisa, verifique se não pode ser o mesmo. Como o SystemJS lé de "js/app/boot", no automático eu havia criado o boot.js na pasta js/app e não na js/app-es6.

https://github.com/rodrigo-luiz-duarte/curso-javascript-avancado/archive/master.zip

Rodrigo, você criou o arquivo .babelrc com o nome errado, você adicionou um espaço entre o ponto e a palavra babelrc. Por isso o arquivo de configuração nunca foi encontrado.

Seu arquivo esta assim:

. babelrc

O correto é

.babelrc

obs: quando corrigir, outros erros apareceram, há nome de arquivos importados erradamente, ele lhe dirá no console do Chrome qual é o arquivo e de onde ele esta sendo importado.

Em NegociacoesView.js você fez assim:

import { currentInstance } from '../controlers/NegociacaoController';

A palavra controller esta escrita errada.

Em NegociacaoController, você esta importando um arquivo que não existe:

Esta assim:

import { NegociacaoView } from '../views/NegociacaoView';

O correto é:

import { NegociacoesView } from '../views/NegociacoesView';

Bom, superando a parte do .babelrc, o resto é só passar um pente fino à procura de erros de digitação.

Mais uma coisa, remova as importações de:

<script src="js/app/polyfill/es6.js"></script>
<script src="js/app/polyfill/fetch.js"></script>

Do index.html.

Sucesso e bom estudo!

Boa noite Flávio,

Cara esse detalhe no nome do arquivo me passou batido e eu nunca teria visto. Os demais erros foram bobeira minha.

Obrigado pela ajuda. Vocês da Caelum são os caras.