ModuleFederation with react - not able to load multiple remotes into main

Question

I am trying to learn microfrontend with reacts using modeuleFederation but facing an issue.

I have 3 projects inside my director which are like

• main - running on port 8080
• remote 1 (products) - running on port 8081
• remote 2 (carts) - running on port 8082

I have configured the webpack file for each project to expose and import and run the remote 1 and remote 2 inside the main, but for some reason only remote 1 loads.

Below is my webpack config for the the import of remotes

module.exports = {
  mode: "development",
  devServer: {
    port: 8080,
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "container",
      remotes: {
        products: "products@http://localhost:8081/remoteEntryProduct.js",
        cart: "cart@http://localhost:8082/remoteEntryCart.js",
      },
    }),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],
};

here is the stackbltiz repo for the dummy project

Please move inside products and cart folder and do yarn and yarn start as we have 3 projects inside there - main, products and cart