Bugs ao codar a aula "Babel e transcompilação de módulos"

Um dos erros indica que NegociacaoController.js não foi encontrado.

Oii Roger,

parece que estas URLs que seu JS está pedindo não existem mais. Os diretórios mudaram de caminho no último exercício ou alguma coisa do tipo?

Olá, Gabriel e Vanessa.

Os diretórios mudaram de caminho sim, mas eu já havia atualizado eles.

Está complicado tentar debugar o código devido ao systemjs também, pois parece que ele, de certa forma, invalidou os source maps (os erros no console abrem os arquivos system.src.js ao serem clicados).

Caso possa olhar o código no GitHub, verá que os arquivos que o console acusou como não encontrados estão lá.

Continuo não identificando o erro.

Bom dia Roger!

Olhei seu código postado no Github. A razão do problema é que em app.js, o primeiro módulo a ser carregado na aplicação, você não esta importando corretamente o NegociacaoController.

Vejamos o seu código aqui:

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

Você esta importando a classe de 'controllers/NegociacaoController', o correto é usar um caminho relativo. Vejamos:

import {NegociacaoController} from 
 './controllers/NegociacaoController'

Ao realizar essa correção, seu arquivo será encontrado, mas pelo o que pude constatar em seu projeto, ainda há outros erros frutos do mesmo problema . No próprio app.js a importação do pollyfill não esta correta, ela precisa ser alterada para:

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

Há outros lugares que precisam de acertos, por exemplo, nas classes que representam as view (algo que imitei do react em vanilla javascript) a importação para View também esta faltando o ./.

Vejamos como esta:

import {View} from 'View';

Como deve ficar:

import {View} from './View';

Ainda assim corrigindo isso você encontrará problemas da mesma natureza e é só ficar atento para o caminho das importações.

Quando terminar de atualizar tudo, se ainda continuar com problema atualize o seu git com as últimas alterações e volte aqui.

Agora uma novidade: os três principais navegadores do mercado já suportam a importação nativa de módulos do ES6. Quando terminar esse curso, sugiro cair dentro do difícil, mas porém não menos importante curso

https://www.alura.com.br/curso-online-javascript-padroes-abordagem-funcional

Nele você aprenderá como importar nativamente módulos do ES2015 sem precisar de Babel. Mas claro, se você precisa suportar navegadores mais antigos ou aqueles que ainda não suportam precisará do processo de transcompilação.

No aguardo meu aluno! Sucesso e bom estudo!

Muito obrigado, professor. Corrigi as url's do código e ele está funcionando perfeitamente.

Assim que terminar este curso, pretendo fazer o de abordagem funcional sim.

Uma dúvida que me surgiu foi em relação às url absolutas e relativas, acho que é primeira vez que usei o './', mas pelo que li, ele referencia o diretório atual do arquivo em que estou trabalhando, certo?

E mais uma dúvida.

Provoquei um erro de propósito no código js e vi que é complicado debugá-lo, pois ao clicar no erro mostrado no console, é mostrado o código do systemjs:

O source maps não deveria funcionar mesmo com o systemjs em execução? O que pode ser feito para facilitar o debug do código neste caso?

Continuo com as dúvidas postadas acima

O ./ referência o diretório atual no qual o arquivo se encontra. Por exemplo, se A importa B, o ./ é o diretório atual de A.

Sobre o system.js, é tenso mesmo. A boa notícia é que existe Webpack e outras ferramentas para empacotar sua aplicação. Abordá-las nesse curso acabaria desvirtuando a ideia de focar no ES6.

Hahah. Entendi. Obrigado, professor!