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.

[michele-menegatti]

Not working for me Inside my host main component:

window.toast = toast;

const Host = () => {
  return (
    ....
      <ToastContainer
          position="bottom-right"
          autoClose={3000}
          hideProgressBar
          closeOnClick
          pauseOnFocusLoss
          pauseOnHover
      />
    ....
  )
}

But when inside a microfrontend imported using module federation I do window.toast('Test') I get the error

Uncaught TypeError: clsx__WEBPACK_IMPORTED_MODULE_1__ is not a function
   at T (react-toastify.esm.mjs:2:1)
   at react-toastify.esm.mjs:2:1
   at react-toastify.esm.mjs:2:1
   at Function.from (<anonymous>)
   at getToastToRender (react-toastify.esm.mjs:2:1)
   at Q (react-toastify.esm.mjs:2:1)
   at renderWithHooks (react-dom.development.js:15486:1)
   at updateFunctionComponent (react-dom.development.js:19617:1)
   at beginWork (react-dom.development.js:21640:1)
   at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)

[dominik-pietrzyca-grass-valley]

For me, putting this library into "shared" in module federation settings solved the problem.