Toast Container in module federation architecture

[mvarakin]

Hello,

I have a micro front end architecture with shell app and remote apps following webpack module federation approach.
I add ToastContainer to shell app but my remote apps seem to not see it. toast(..) just does nothing.
Looks like the container is unregistered once a remote app is mounted.

Shell is rendered this way
root.render( <Provider store={store}> <ToastContainer position='top-right' /> <Suspense fallback={<PageLoader withHeader={false} />}> <ThemeProvider theme={theme}> <CssBaseline /> <App /> </ThemeProvider> </Suspense> </Provider>, );

where App in its turn has Routes to remote apps.

So, in terms of DOM all the remote apps are nested under shell-root

Any remote app in its turn is rendered in its own root
const root = createRoot(mountPoint); // mountPoint, for example, is maintenance-mfe
root.render( <ThemeProvider theme={theme}> <Provider store={maintenanceStore}> <RouterProvider router={router} /> </Provider> </ThemeProvider>, );

[bertanyaman]

Hi,

I solved this issue by creating a global globalToast variable that all micro frontends (MFEs) can access. Ensure there's only one ToastContainer in the host app, and every remote app can trigger toasts without any issues.

if (!window.globalToast) {
window.globalToast = toast;
}

This way, the ToastContainer remains in the shell app, and the toast() function can be accessed globally by all remote apps.