Entrar Ainda não tem acesso?
2
respostas

Erro ao inserir o hello-world no orquestrador

Referente ao curso Single SPA: orquestrando micro front-ends

por Mayron Souza
| 19.3k xp | 3 posts
Analista Senior - Backend

Eu estou acompanhando a aula onde criamos o hello-world, antes a aplicação gmz-home-hub está subindo normal no localhost:9000, quando crio o hello-world e o testo na localhost:8500, este sobe normal, também. O problema acontece quando vou integrar os dois:

import { registerApplication, start, LifeCycles } from "single-spa";

registerApplication({
  name: "@single-spa/welcome",
  app: () =>
    import(
      /* webpackIgnore: true */ // @ts-ignore-next
      "https://unpkg.com/single-spa-welcome/dist/single-spa-welcome.js"
    ),
  activeWhen: ["/"],
});

registerApplication({
  name: "@gmz-home-hub/hello-world",
  app: () =>
    import(
      /* webpackIgnore: true */ // @ts-ignore-next
      "@gmz-home-hub/hello-world"
    ),
  activeWhen: ["/"],
});

start({
  urlRerouteOnly: true,
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Root Config</title>
  <meta http-equiv="Content-Security-Policy" content="default-src 'self' https: localhost:*; script-src 'unsafe-inline' 'unsafe-eval' https: localhost:*; connect-src https: localhost:* ws://localhost:*; style-src 'unsafe-inline' https:; object-src 'none';">
  <meta name="importmap-type" use-injector />
  <!-- If you wish to turn off import-map-overrides for specific environments (prod), uncomment the line below -->
  <!-- More info at https://github.com/single-spa/import-map-overrides/blob/main/docs/configuration.md#domain-list -->
  <!-- <meta name="import-map-overrides-domains" content="denylist:prod.example.com" /> -->

  <!-- Shared dependencies go into this import map -->
  <script type="injector-importmap">
    {
      "imports": {
        "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@6.0.3/lib/es2015/esm/single-spa.min.js",
        "react": "https://ga.jspm.io/npm:react@19.0.0/dev.index.js",
        "react-dom": "https://ga.jspm.io/npm:react-dom@19.0.0/dev.index.js"
      }
    }
  </script>
  <link rel="preload" href="https://cdn.jsdelivr.net/npm/single-spa@6.0.3/lib/es2015/esm/single-spa.min.js" as="module">

  <!-- Add your organization's prod import map URL to this script's src  -->
  <!-- <script type="injector-importmap" src="/importmap.json"></script> -->

  <% if (isLocal) { %>
  <script type="injector-importmap">
    {
      "imports": {
        "@gmz-home-hub/root-config": "//localhost:9000/gmz-home-hub-root-config.js",
        "@gmz-home-hub/hello-world": "//localhost:8500/gmz-home-hub-hello-world.js",
        "@single-spa/welcome": "https://cdn.jsdelivr.net/npm/single-spa-welcome/dist/single-spa-welcome.min.js"
      }
    }
  </script>
  <% } %>

  <script src="https://cdn.jsdelivr.net/npm/import-map-overrides@5.1.1/dist/import-map-overrides.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@single-spa/import-map-injector@2.0.1/lib/import-map-injector.js"></script>
</head>
<body>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
  <main></main>
  <script>
    window.importMapInjector.initPromise.then(() => {
      import('@gmz-home-hub/root-config');
    });
  </script>
  <import-map-overrides-full show-when-local-storage="devtools" dev-libs></import-map-overrides-full>
</body>
</html>

imagem do erros na integração entre o home-hub e o hello-world

2 respostas
por Mayron Souza
| 19.3k xp | 3 posts
Analista Senior - Backend

segue estrutura da aplicação

estrutura da aplicação

por Rafaela Petelin Silvério
| 712.6k xp | 1589 posts
Alura Scuba Team Monitora de Fórum

Oi, Mayron!

O erro "System is not defined" indica que o SystemJS não está sendo reconhecido no contexto da sua aplicação Single-SPA. Isso pode estar acontecendo por algumas razões comuns:

Verifique se o SystemJS está importado corretamente

No seu HTML, parece que o SystemJS não está sendo carregado. Para resolver isso, adicione o seguinte script ao <head> do seu index.html: 


<script src="https://cdn.jsdelivr.net/npm/systemjs@6.10.2/dist/system.min.js"></script>

Isso garantirá que o SystemJS esteja disponível antes da execução do código.

Corrija a importação do módulo no registerApplication

No código do registerApplication, você está tentando importar diretamente a aplicação hello-world com import(), mas o correto para o Single-SPA é usar System.import().

Ajuste a chamada para: 


registerApplication({
  name: "@gmz-home-hub/hello-world",
  app: () => System.import("@gmz-home-hub/hello-world"),
  activeWhen: ["/"],
});

Isso deve resolver o problema de carregamento da aplicação hello-world dentro do orquestrador.

Verifique se o import-map está configurado corretamente

No <script type="injector-importmap">, o import map está mapeando @gmz-home-hub/hello-world para //localhost:8500/gmz-home-hub-hello-world.js. Certifique-se de que o servidor realmente está servindo esse arquivo acessando http://localhost:8500/gmz-home-hub-hello-world.js no navegador.

Se esse arquivo não carregar, o erro continuará. Nesse caso, verifique se o Webpack do microfrontend está configurado para exportar corretamente a aplicação.

Espero ter ajudado. Conte com o apoio do fórum :)

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓