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(

}> , );` 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( , );`

[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.