fkhadra / fkhadra/react-toastify
React-Toastify does not work in Microfrontend when used inside an App Shell in versions 10 and 11
- Dominant language
- TypeScript
- Stars
- 13.4k
- Forks
- 741
- PR merge metrics
- No merged PRs in 30d
Description
# 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!
Contributor guide
Assessment
This issue has not been assessed yet.