@ScriptedAlchemy any guidance around deployment of a large module federated app? I am looking to do exactly what you demonstrated on the shared-routing example with a shell and various feature MFs. When serving it seems that the plug-in manages setting up the n number of servers on ports, but when doing an actual production deployment, what are the best practices and examples here? How do you configure what the different remotes might be served from and are there ways that certain remotes can build and deploy only their changes safely without the shell?

Overall amazing work with this and really can’t wait to see more adoption of module federation in the community!

@ScriptedAlchemy , first up, kudos to the team for the awesome work going on here.

I built a test app in TypeScript (React micro-frontends - container, header, landing page, auth page etc.) You can see code and demohere.

There are two issues I noticed and wanted to understand possible workarounds for these:

1. The app does not scale very well on a mobile device. That is, the text, header size etc. is really small. Kinda like when you see a desktop version of the application on the mobile. Is this expected behavior in the current version? I tried running the local for thetypescript example from this repo and it seems to have a similar issue. Is there any plan on the roadmap towards a solution for this?

I'm attempting to workaround issue 1 by rendering a different set of microfrontends for the mobile app (albeit this is a sub-optimal approach). I will get back here on my experience with this workaround and how successful/effective the implementation turned out to be.

2. When I change routes (say from landing to auth) -> the cleanup of useEffects inside landing is not fired. That is the landing micro-frontend is not unmounted. Any ideas for how I can work around this issue?

@ScriptedAlchemy, thank you for putting all the hard work on this amazing feature.

Currently, I am trying to implement a module federation POC with the shell architecture. I noticed that module federation will disable tree-shaking on shared modules. Because of this , I am wondering is it true that we should only share non tree-shakable libraries only (e.g. react, react-dom but not lodash-es) ?

Hi@ScriptedAlchemy,@jacob-ebey!
First of all, thanks a lot you for the amazing work.
Currently, I am trying to implement an example with webpack 5 module federation and got one error that I just can't solve.

remote:
new ModuleFederationPlugin({
name: 'app',
filename: "remoteEntry.js",
remotes: {
service01:
'service01@http://localhost:3001/remoteEntry.js'
},
exposes: {
'./ThemeToggleButton': paths.src + '/contexts/ThemeContext/ThemeToggleButton',
},
....
}),

host:
new ModuleFederationPlugin({
name: "service",
filename: "remoteEntry.js",
exposes: {
"./ServiceApp": "./src/components/App",
},
remotes: {
mainApp: "app@http://localhost:8080/remoteEntry.js",
},
....
}),

and

const ThemeToggleButton = React.lazy(() => import("mainApp/ThemeToggleButton"));

const App = () => (
< container >
< React.Suspense fallback="ThemeToggleButton" >
< ThemeToggleButton />
</ React.Suspense >
</ container >
);

I would be very grateful if you can help and tell what I am doing wrong. Thanks

how to handle various environments with the same file nameremoteEntry?
let's say I got two environments,test andprod。and we are using CDN to load the js file. the test build process will bundle the js file and upload it to cdn，but thetest andprod using the same CDN and file name.

Hi guys-@ScriptedAlchemy@jacob-ebey
Thanks for all the good work.. !!!

I am using webpack latest version, I am using bi directional MF approach. Only problem I am facing for each env I have to build the bundle seperately as in remote :{ } we are providing absolute path.

Lot of discussion is going on finding any hack to provide the remote bundle url at run time not at build time..

Is there any solution for this so that I can use same bundle for all my env and can set remote bundle url dynamically at runtime?

One folk suggested this plugin, will it work

#566

does the module federation plugin provide any hooks?

https://github.com/module-federation/module-federation-examples/blob/master/shared-routes2/app1/src/App.js#L6

I wonder how this one can be loaded the sync way?

import { HashRouter, Route, Switch } from "react-router-dom";import Navigation from "app1/Navigation";import React from "react";import localRoutes from "./routes";import remoteRoutes from "app1/routes";const routes = [...localRoutes, ...remoteRoutes];const App = () => (  <HashRouter>    <div>      <h1>App 2</h1>      <Navigation />      <React.Suspense fallback={<div>Loading...</div>}>        <Switch>          {routes.map((route) => (            <Route              key={route.path}              path={route.path}              component={route.component}              exact={route.exact}            />          ))}        </Switch>      </React.Suspense>    </div>  </HashRouter>);export default App;

I'm new to this and still figuring things out. I have module federation working great in my project. My question is around error capturing if a sub app is down. In other words I have shell calling child. In my development environment if I start the child app everything works as expected. But if I stop child app then shell app spins and gives me some errors as expected. My question is how do I handle this. I'm not entirely sure how I can capture the event error ofhttp://localhost:8081/remoteEntry.js (child app) not being available. I just want to be able to display a nice spinner while remote entry is loading and then display an error if the sub app is not available. Any help or suggestions would be appreciated.

I am currently developing a project respecting a microfrontend architecture using Webpack5 Module Federation and Angular. I am dealing with a somewhat anondin problem. Indeed, all my microfrontends (remote) work perfectly alone but when integrating them into the shell (host). I have an error that appears and shows some bugs on the application.

ERROR TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

This error comes from Angular Core and especially when there is an integrated Angular Material component.

The craziest thing about this problem is that it’s no longer there when I activate the chrome extension "Redux Dev Tools".
Do you have any ideas ?

There’s probably a problem with sharing libraries, but I don’t know where?

My various configs of the host and remotes:
Shell :

    new ModuleFederationPlugin({      remotes: {          // all remotes that will be used in the shell          'designer': "designer@http://localhost:4201/remoteEntry.js",          'library':"library@http://localhost:4202/remoteEntry.js"        },      shared:  {        // all libraries that will be shared with microfrontends        "@angular/core": { singleton: true, strictVersion: false },        "@angular/common": { singleton: true, strictVersion: false },        "@angular/router": { singleton: true, strictVersion: false },        "@angular/forms":{ singleton: true, strictVersion: false },        "@angular/cdk":{ singleton: true, strictVersion: false },        "@angular/material":{ singleton: true, strictVersion: false },        //"@ngx-translate/core":{ singleton: true, strictVersion: false },        "@bl/auth-token": { singleton: true, strictVersion: false },        //"@bl/elements": { singleton: true, strictVersion: false },        "@bl/theme": { singleton: true, strictVersion: false },        "@bl/shared": { singleton: true, strictVersion: false },        "@bl/bl-app-layout": { singleton: true, strictVersion: false },      }  })

Remote 1 :

new ModuleFederationPlugin({                // For remotes (please adjust)      name: "library",      filename: "remoteEntry.js",      exposes: {        './web-components': './src/bootstrap.ts',      },              shared:  {        "@angular/core": { singleton: true, strictVersion: false },        "@angular/common": { singleton: true, strictVersion: false },        "@angular/router": { singleton: true, strictVersion: false },        "@angular/forms":{ singleton: true, strictVersion: false },        "@angular/cdk":{ singleton: true, strictVersion: false },        "@angular/material":{ singleton: true, strictVersion: false },        //"@ngx-translate/core":{ singleton: true, strictVersion: false },        "@bl/auth-token": { singleton: true, strictVersion: false },        //"@bl/elements": { singleton: true, strictVersion: false },        "@bl/theme": { singleton: true, strictVersion: false },        "@bl/shared": { singleton: true, strictVersion: false },        "@bl/bl-app-layout": { singleton: true, strictVersion: false },      }    }),

Remote 2:

new ModuleFederationPlugin({                // For remotes (please adjust)      name: "designer",      filename: "remoteEntry.js",      exposes: {        './web-components': './src/bootstrap.ts',      },              shared:  {        "@angular/core": { singleton: true, strictVersion: false },        "@angular/common": { singleton: true, strictVersion: false },        "@angular/router": { singleton: true, strictVersion: false },        "@angular/forms":{ singleton: true, strictVersion: false },        "@angular/cdk":{ singleton: true, strictVersion: false },        "@angular/material":{ singleton: true, strictVersion: false },        //"@ngx-translate/core":{ singleton: true, strictVersion: false },        "@bl/auth-token": { singleton: true, strictVersion: false },        //"@bl/elements": { singleton: true, strictVersion: false },        "@bl/theme": { singleton: true, strictVersion: false },        "@bl/shared": { singleton: true, strictVersion: false },        "@bl/bl-app-layout": { singleton: true, strictVersion: false },      }    }),

I am trying to runmulti-threaded-ssr, its complaining @module-federation/federated-runtime-plugin@* is not found in the npm registry, is the package json up to date?

Hi guys! I hope everyone is okay!
I'm currently working on a project that has been migrated from CRA to webpack5 so module federation can be used. And then I developed a micro-frontend that exposes some components and contexts to handle authentication workflow. Here is the point, when my first app consumes it synchronously, aparently all works just fine, but I got this error console:

Uncaught (in promise) Error: Container initialization failed as it has already been initialized with a different share scopewhile loading "./AuthProvider" from webpack/container/reference/authwhile loading "./AccessDenied" from webpack/container/reference/authwhile loading "./Login" from webpack/container/reference/authwhile loading "./PublicRoute" from webpack/container/reference/authwhile loading "./PrivateRoute" from webpack/container/reference/auth    at Object.init (remoteEntry.js:56)    at initFn (bundle.js:394)    at async Promise.all (:3000/index 0)

Auth App

new ModuleFederationPlugin({      name: 'auth',      filename: 'remoteEntry.js',      exposes: {        './AccessDenied': './src/core/components/AccessDenied',        './UnauthorizedModal': './src/core/components/UnauthorizedModal',        './PrivateRoute': './src/core/components/PrivateRoute',        './PublicRoute': './src/core/components/PublicRoute',        './Login': './src/core/pages/Login',        './AuthProvider': './src/core/contexts/auth',      },      remotes: {},      shared: {        ...dependencies,        'react-router-dom': {          requiredVersion: dependencies['react-router-dom'],          singleton: true,        },        'react-dom': {          requiredVersion: dependencies['react-dom'],          singleton: true,        },        react: {          requiredVersion: dependencies.react,          singleton: true,        },        axios: {          requiredVersion: dependencies.axios,          singleton: true,        },       // custom design system lib        'ui': {          singleton: true,        },      },    }),

Consume App

new ModuleFederationPlugin({      name: 'consumer',      filename: 'remoteEntry.js',      remotes: {        auth: 'auth@http://localhost:8080/remoteEntry.js',      },      exposes: {},      shared: {        ...dependencies,        'react-router-dom': {          requiredVersion: dependencies['react-router-dom'],          singleton: true,        },        'react-dom': {          requiredVersion: dependencies['react-dom'],          singleton: true,        },        react: {          requiredVersion: dependencies.react,          singleton: true,        },        axios: {          requiredVersion: dependencies.axios,          singleton: true,        },       // custom design system lib        'ui': {          singleton: true,        },      },    }),

I don't know if I understand what the error mean, but how can the container has already been initialized with a different share scope?

Hi@ScriptedAlchemy@jherr

I'm working on a SPA, In which i have a application shell and number of micro-frontends that are loaded based on the route configuration. I have achieved this with the help of webpack's module federation plugin.

Now i wanted to communicate UI state / data between micro-frontends, i have preferred Pub/Sub model of communication between the MFE's. But I don't want the Pub/Sub to be a global API whereas i wanted it to be local between the parent and child.

The issue i'm facing is :

While Sharing the Pub/Sub code between Micro Frontends, Every time a new instance of the Pub/Sub is being created, But I wanted a single instance of Pub/Sub between parent and child.

The reason for the issue being the file is being completely loaded using webpack.require rather than sharing the instance alone.
How can i overcome this isuse/ Or should i use any other way of communication?

Sorry@ScriptedAlchemy, got another questions.

Can you suggest a best practice on usingeager: true? Is it correct if we use this to reduce the number of chunks downloaded?

For instance, I have ashell andchild application, and they are sharing 10 dependencies whose size are < 10KB. If I put these 10 dependencies intoshared withouteager: true, then the plugin will break up these 10 dependencies into 10 small chunks, and there will be 10 different network request. I feel this is a bit overwhelming and performs bad in HTTP 1.1 ?

However if seteager: true, these dependencies will be included in theshell bundle so those small chunks won't be downloaded. Of course the shell chunk and it'sremoteEntry will be bigger, but this reduces the number of network request.

Is this actually an intended usage ofeager: true?

Hey Folks,

I wanted to use dynamic federated module loading in a web worker, so I adapted some of the advanced API examples to work in a web workers.Example here in case it helps anyone else.

Cheers,

Has anyone made any progress with exposing components from the new nextJs 13app directory architecture (which replaces pages)?

Currently, when I do this, I getcreateContext only works in Client Components

I'm particularly interested in this because in modularises the server side code, rather than at the _app.tsx entry point (which is incompatible with module federation)

Hi Team-@ScriptedAlchemy / all Developers,

I have worked with custom elements previously in angular. Now am trying to use Modular Federation approach to load mfe. I am using different versions in angular for different mfe's. I am using custom element approach in modular federation(https://www.angulararchitects.io/en/aktuelles/multi-framework-and-version-micro-frontends-with-module-federation-your-4-steps-guide/). As a Custom element it will work when we downloaded the build js files in browser and add the "tag or attribute" to dom.
My doubt is custom element can work independly we all aware of it, but how does the sharing libraries comes into picture, if its a modular federation web components. How it really now downloading the packages if we keep it shared library in shell. Even if we have same version and go with custom element approach in modular federation as it has its own bundled files. While building the application separately, it never knows the shell shares. I really don't know how it avoids the duplicate package to load again. On runtime how it negotiates. I may be wrong in conveying or getting things right.

"Your help to understand me is highly appreciable"

Thanks all for the support.

Hi@ScriptedAlchemy, team,
I would like to say a big thank you for making SSR version free to use. Here is our case, I believe to get some ideas about it.

We have a pretty big application that uses Marionette and Preact 8 with SSR. It has a big codebase, which is bundled by Webpack 4. Let's call itBase Repository.
What is the most convenient way to feed to this application Microfrontends from another mono-repository(let's call it Monorepo) which is going to be written in React 18?

I see it as the following approach:

1. Upgrade Webpack 4 to Webpack 5, add ModuleFederationPlugin inBase Repostory
2. Do not share any dependencies (for the sake of simplicity) betweenBase Repository aka host app andMonorepository apps
3. Leverage NX, ModuleFederation functionality, and all great features insideMonorepository

Will it work with SSR? Is there a simpler solution? The less we touchBase Repository application logic the better.
Thank you!

@ScriptedAlchemy , is there a way to check what a package version is resolved to?
Scenario:
We have a host app that uses package x version 1.0.0 .
We have a client app that uses package x version 2.0.0
We have several other apps that use package x version we don't know.

There is a bug that does not happen locally when application is running in dev mode, but happens only when all mfes are deployed. We suspect that this is a specific bug with one of the packages, but we cannot figure out the version of the package x that is used by the mfe in prod mode.

Hello@ScriptedAlchemy

I'm new in Next.js Module Federation, I just came up with issue about exposedPages, innext2 module I've page calledprofile.tsx where I use image, I try to put that page innext1 but image is not showing because I usenext/image component which renders on server and saves in.next folder andnext1 doesnt have access onnext2.next folder so is there any solution fix to that? or I should avoid usingnext/images

Thanks

Hello again@ScriptedAlchemy

Currently working with nextjs module federations which uses tailwind as styling, in current module tailwind works pretty well but when I export for example page or component viaexpose orexposedPages styles are no longer applying in on module, for example ifnext2 module has stylings and imoporting it innext1, after runningnext1 locally,next2 is showing up but not its stylings is there any solution to fix that?

this is my next1next.config.js

const{ NextFederationPlugin}=require("@module-federation/nextjs-mf");/**@type {import('next').NextConfig} */constnextConfig={reactStrictMode:true,images:{domains:["avatars.githubusercontent.com"],},css:{modules:true,global:["./src/styles/global.css"],// Add the path to the styles.css file},webpack:(config,options)=>{const{ isServer}=options;config.plugins.push(newNextFederationPlugin({name:"next1",remotes:{next2:`next2@http://localhost:3001/_next/static/${isServer ?"ssr" :"chunks"}/remoteEntry.js`,},filename:"static/chunks/remoteEntry.js",exposes:{"./footer":"./src/components/Footer/index.tsx","./header":"./src/components/Header/index.tsx",},shared:{tailwindcss:{eager:true,singleton:true,},},}));returnconfig;},};module.exports=nextConfig;

if any farther configurations are necessary, mention it and I'll send here

Thanks