mount doesn't work with Ember 3.28 version

[villander]

I'm using this guide as a reference - https://single-spa.js.org/docs/ecosystem-ember/

ember-cli: 3.28.0
node: 14.17.5
os: darwin x64

That's my root-config

import { registerApplication, start } from "single-spa";
import {
  constructApplications,
  constructRoutes,
  constructLayoutEngine,
} from "single-spa-layout";
import { loadEmberApp } from "single-spa-ember";

const isLocal = true;
const routes = constructRoutes(document.querySelector("#single-spa-layout"), {
  loaders: {
    topNav: "<h1>Loading topnav</h1>",
  },
  errors: {
    topNav: "<h1>Failed to load topnav</h1>",
  },
});

const navbarDomain = isLocal
  ? "http://localhost:4200"
  : "https://ember-micro-frontends.github.io/navbar";
const navbarApp = registerApplication(
  "navbar",
  () => {
    const appName = "navbar";
    const appUrl = `${navbarDomain}/assets/navbar.js`;
    const vendorUrl = `${navbarDomain}/assets/vendor.js`;
    return loadEmberApp(appName, appUrl, vendorUrl);
  },
  (location) => location.pathname.startsWith("/")
);

const paymentsDomain = isLocal
  ? "http://localhost:4202/payments"
  : "https://ember-micro-frontends.github.io/payments";
const paymentsApp = registerApplication(
  "payments",
  () => {
    const appName = "payments";
    const appUrl = `${paymentsDomain}/assets/payments.js`;
    const vendorUrl = `${paymentsDomain}/assets/vendor.js`;
    return loadEmberApp(appName, appUrl, vendorUrl);
  },
  (location) => location.pathname.startsWith("/payments")
);

const applications = [];
applications.concat(navbarApp);
applications.concat(paymentsApp);
applications.forEach(registerApplication);
const layoutEngine = constructLayoutEngine({ routes, applications });

layoutEngine.activate();
start();

I'm getting this error when I try to access http://localhost:9000/payments

The first app navbar is working well, but when I try to load a second app I have this error related with glimmer

[rajasegar]

@villander try this

globalThis[Symbol.for('GLIMMER_VALIDATOR_REGISTRATION')] = false;

https://github.com/glimmerjs/glimmer-vm/issues/1252

[villander]

@rajasegar I put this code in the navbar/app.js (the host app). It's working thank you!

Now I'm receiving this different error. I tried to use location.pathname.startsWith("/payments/") on root-config but it doesn't work. Also, I had a look in your project here - I'm using the same way setting rootURL: '/payments'

Uncaught (in promise) Error: Assertion Failed: Path /payments does not start with the provided rootURL /payments/

If I access the URL manually http://localhost:9000/payments/ it will work, but how to make this work out of the box?

Other questions, the styles from the payments weren't applied, I'm using <WelcomePage /> component from ember, but it only shows the markup. How to inject the styles into every application?

[villander]

@rajasegar when I change the locationType to hash it works perfectly removing this shit error. Do you have some idea why it happens? If I use hash I can't access the nested routes, like payments.chargeback directly.

Uncaught (in promise) Error: Assertion Failed: Path /payments does not start with the provided rootURL /payments/

[rajasegar]

@villander The above issue is related to this https://github.com/emberjs/ember.js/issues/19102