Não funcionou o Parcel, deu erro no mount do MFE que importa o parcel

Oi, Thiago! Como vai?

O erro Unable to resolve bare specifier '@orgName/styleguide-ui' acontece porque o import map não está mapeando corretamente o nome do módulo para o arquivo gerado, ou o nome não está consistente no projeto.

Passos para resolver:

1. Adicione o import map no index.ejs do root-config:

<script type="systemjs-importmap">
{
  "imports": {
    "@orgName/styleguide-ui": "http://localhost:8500/styleguide-ui.js"
  }
}
</script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.15.1/dist/system.min.js"></script>

1. Verifique o package.json do parcel:

{
  "name": "@orgName/styleguide-ui"
}

1. Ajuste o build para gerar bundle no formato system:

output: {
  filename: "styleguide-ui.js",
  libraryTarget: "system"
}

1. Monte o parcel no host:

import { mountRootParcel } from "single-spa";

export function mountBanner() {
  const lifecycles = () => System.import("@orgName/styleguide-ui");
  return mountRootParcel(lifecycles, {
    domElement: document.getElementById("promo-container"),
  });
}

Dica: confira se a URL http://localhost:8500/styleguide-ui.js abre no navegador.
Se não carregar, o problema está no servidor ou na porta.

Resumindo, alinhe o import map, o nome do pacote e garanta que o bundle seja exportado como System.register. Assim o erro será resolvido.

Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição.

Abraços e bons estudos!