8
respostas

Erro na Fetch API

Adicionei a fetch API, conforme o vídeo e estava funcionando normalmente. Porém, quando realizei a compilação pelo transpiller (Babel), começou a aparecer o seguinte erro no meu console:

ncaught ReferenceError: exports is not defined
    at fetch.js:3
(anonymous) @ fetch.js:3

Na linha 3 do fetch.js aparece

Object.defineProperty(exports, "__esModule", {
  value: true
});

O que poderia ser e como corrigir?

8 respostas

Fala ai Wiliam, tudo bem? Você configurou o preset do Babel como foi feito na aula?

{
    presets: ["es2015"]
}

Pode ser que houve alguma diferença no código transpilado seu com o referente ao curso.

Espero ter ajudado.

Fala ai Wiliam, tudo bem? Você configurou o preset do Babel como foi feito na aula?

{
    presets: ["es2015"]
}

Pode ser que houve alguma diferença no código transpilado seu com o referente ao curso.

Espero ter ajudado.

Sim, utilizei o presets no arquivo .babelrc.js Estou desconfiando que possa ser algum problema de compatibilidade da versão do Node.js com o Babel. Pois, estou tendo problemas nos próximos passos do curso.

Pode ser por questões de compatibilidade também, geralmente recomendamos que os alunos utilizem as mesmas versões referente ao curso, para evitar qualquer problema em relação à isso.

Compartilha seu projeto comigo, assim eu consigo simular o problema por aqui e analisá-lo com mais calma.

Pode compartilhar através do Github ou Google Drive (zipado).

Fico no aguardo.

Obrigado pelo retorno, Matheus!

Segue o link do google drive com pasta zipada: https://drive.google.com/file/d/1XMvixkM3jfOS4e83EZYhaotoGuuYEW9p/view?usp=sharing

Fala ai William, tudo bem? Fiz o teste com seu projeto e aqui não deu o problema mencionado, no caso:

ncaught ReferenceError: exports is not defined
    at fetch.js:3
(anonymous) @ fetch.js:3

O que eu fiz foi apagar a pasta node_modules do client e server, e no client também apaguei o package-lock.json.

Depois fiz a instalação das dependências novamente:

npm i

Tanto para client quanto para server.

Dai subi o servidor:

npm start

E buildei o app:

npm run build

O problema que deu aqui foi para a SystemJS achar os arquivos, isso porque no index.html:

<script>
        System.defaultJSExtensions = true; // hide the extension .js from your imports
        System.import('js/app/boot.js').catch(function(err){
            console.error(err);
        });
</script>    

Faltou colocar ./ no System.import, ficando:

<script>
        System.defaultJSExtensions = true; // hide the extension .js from your imports
        System.import('./js/app/boot.js').catch(function(err){
            console.error(err);
        });
</script>    

E nas importações dos arquivos:

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

let negociacaoController = currentInstance();

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

Precisa adicionar a extensão .js, isso porque nas novas versões da SystemJS as configurações são um pouco diferente, o jeito mais fácil (ao meu ver) seria adicionar a extensão.

// /client/js/app-es6/boot.js
import {currentInstance} from './controllers/NegociacaoController.js';
import './polyfill/fetch.js';

let negociacaoController = currentInstance();

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

Obs: Em todos os import você vai precisar adicionar o .js.

Espero ter ajudado.

Olá, matheus valeu pelo retorno!

Fiz tudo conforme você me informou (adicionei as extensões .js em todos os arquivos > atualizei meu index.html > deletei o node_modules (client/server) e package-lock.json (client) > instalei novamente as instâncias em ambas > subi o server > buildei o app), mas agora está aparecendo a seguinte mensagem:

system.js:579 GET http://localhost:3000/js/app/services/HttpService.js net::ERR_ABORTED 404 (Not Found)
(anonymous) @ system.js:579
systemJSPrototype.instantiate @ system.js:563
systemJSPrototype.instantiate @ system.js:801
(anonymous) @ system.js:278
Promise.then (async)
getOrCreateLoad @ system.js:277
(anonymous) @ system.js:331
Promise.then (async)
(anonymous) @ system.js:330
(anonymous) @ system.js:327
Promise.then (async)
getOrCreateLoad @ system.js:326
(anonymous) @ system.js:331
Promise.then (async)
(anonymous) @ system.js:330
(anonymous) @ system.js:327
Promise.then (async)
getOrCreateLoad @ system.js:326
(anonymous) @ system.js:331
Promise.then (async)
(anonymous) @ system.js:330
(anonymous) @ system.js:327
Promise.then (async)
getOrCreateLoad @ system.js:326
(anonymous) @ system.js:229
Promise.then (async)
systemJSPrototype.import @ system.js:228
systemJSPrototype.import @ system.js:670
(anonymous) @ (index):61
(index):62 Error: Error loading http://localhost:3000/js/app/services/HttpService.js from http://localhost:3000/js/app/services/NegociacaoService.js
    at HTMLScriptElement.<anonymous> (system.js:566)

Estranho William, compartilha o projeto atualizado, eu dou uma olhada novamente.

Fico no aguardo.