React-Toastify does not work in Microfrontend when used inside an App Shell in versions 10 and 11

[fhodeus]

React-Toastify does not work in Microfrontend when used inside an App Shell in versions 10 and 11

Description

Hello, I am experiencing an issue when using react-toastify in a microfrontend project.

Context

I have a microfrontend that uses react-toastify normally. When the microfrontend runs independently, the toasts appear correctly on the screen.

However, when this microfrontend is loaded inside the App Shell (the main container that hosts the microfrontends), the toasts are not displayed when calling toast().

After several attempts, I noticed that:

• Version 9.x of react-toastify works correctly.
• Versions 10.x and 11.x do not display toasts inside the App Shell.

What I have tried

• Changed the library versions (9.x, 10.x, 11.x).
• Verified that the ToastContainer is rendering correctly inside the microfrontend.
• Ensured that react-toastify styles are properly imported.
• Tested different ToastContainer configurations.
• Inspected the DOM and noticed that the toast elements are not being rendered in the newer versions.

Environment

• React Version: 18.3.1
• React-Toastify Version: 10.x / 11.x (not working), 9.x (working)
• Microfrontend Framework: Webpack Module Federation
• Rendering Mode: Client-side

Question

Were there any changes in versions 10 and 11 that could impact the use of react-toastify inside a microfrontend context? Is there any recommended solution or workaround for this case?

Any help is greatly appreciated!

[fkhadra]

Hey @fhodeus, since v11, the style is injected by the lib, can you import the library as follow:

import {ToastContainer, toast } from "react-toastify/unstyled"

// also import the css
import 'react-toastify/dist/ReactToastify.css';

Let me know if that solve your issue. Also if you could share your setup on stackblitz that would be helpful to debug, thanks

[yannicksaenen]

Any update or workaround available on this?

[fhodeus]

Hey @fhodeus, since v11, the style is injected by the lib, can you import the library as follow:

import {ToastContainer, toast } from "react-toastify/unstyled"

// also import the css
import 'react-toastify/dist/ReactToastify.css';
Let me know if that solve your issue. Also if you could share your setup on stackblitz that would be helpful to debug, thanks

Hi @fkhadra, sorry for taking so long, the project has been paused,
The proposed solution did not solve the problem
I created a project on stackblitz that simulates the error.

https://stackblitz.com/~/github.com/fhodeus/react-toastify-microfrontend

I also made a demo project in a public repository on my github that presents a similar context to the project I work on

[Nicochung]

Hi @fhodeus, I believe the problem is related to the ModuleFederation setup in your project.

Shell and App have their own copy of react-toastify (two copy in total), and they don't communicate with each other.
Currently, the App toast function can't find it's ToastContainer when the button is import in Shell.

You can either add react-toastify as a shared module in the webpack config for both Shell and App. To ensure there is only one copy of react-toastify.

  shared: { react: { singleton: true }, 'react-dom': { singleton: true }, "react-toastify": { singleton: true } },

Or you can export the ToastContainer from the App as well. so the App toast function can find it's ToastContainer when being imported by Shell
This approach will two independent container. One for Shell, the other for App

const MyComponent = () => {
  return (
    <>
      <div style={{ border: "1px solid red", padding: "10px " }}>
        <h2>Button from Microfrontend App</h2>
        <button
          onClick={() => {
            toast.success("Hello World");
          }}
        >
          Click me
        </button>
      </div>
      <ToastContainer />
    </>
  );
};

I hope this solves your problem.