If module fedaration and single spa are used together modules can not be loaded!

[dmlgncn]

I m using single-spa and module fedaration(wp5) together but when I tried to import my modules with System , I m getting error like

In my root-config
<template id="single-spa-layout"> <single-spa-router> <main> <route path="/"> <application name="productImage/ProductImage"></application> </route> <route path="login"> <application name="angularJs/AngularJs"></application> </route> </main> </single-spa-router> </template>

productImage/ProductImage and angularJs/AngularJs are my modules which is exposed by module fedaration.

Is it possible to use this add-on to routing mechanism or should I find another way?

[kalongthewires]

I'm not sure if this will address the problem for you (you might consider including your code so someone can help you more directly) but for anyone else that has run into a similar problem and also ends up here: I was able to get single-spa-layout working with Webpack Module Federation Plugin.

root config

const remotes = {
  someWidget: import("someWidget/SomeWidget"),
  anotherWidget: import("anotherWidget/AnotherWidget")
};

const routes = constructRoutes(document.getElementById("single-spa-layout"));

const applications = constructApplications({
  routes,
  loadApp: ({ name }) => {
    return remotes[name];
  }
});

constructLayoutEngine({ routes, applications });
applications.forEach(registerApplication);

start();

webpack.config.js:

{
  ...other config...
  plugins: [
    new ModuleFederationPlugin({
      name: "root",
      remotes: {
        someWidget: "someWidget@http://localhost:8081/remoteEntry.js",
        anotherWidget: "anotherWidget@http://localhost:8082/remoteEntry.js"
      },
    },
    ...etc...
  ]
}

index.html:

<template id="single-spa-layout">
  <single-spa-router>
    <application name="someWidget"></application>
    <application name="anotherWidget"></application>
  </single-spa-router>
</template>

example of webpack.config.js in remote MFEs:

plugins: [
  new ModuleFederationPlugin({
    name: "someWidget",
    filename: "remoteEntry.js",
    exposes: {
      "./SomeWidget": "./src/entry.js"
    }
  })
]