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?