microsoft/redux-micro-frontend

Error related to RXJS when using Webpack 5 Module Federation

Flooze-IT opened this issue · 2 comments

Flooze-IT commented

** Context **
I am currently in the process of experimenting with a microfrontend architecture with Webpack 5 and the Module Federation plugin. I have integrate this library to communicate with microfrontends based on web-components.

Describe the bug
When i integrate the "redux-micro-frontend" library inside my shell or microfrontend separatly based on Angular, all it is fine. But when i unite the shell and microfrontends AND i use an othe library who use RXJS like angular material. An error occured :
image

At first I didn't notice the error because I had the Redux dev tools chrome extension enabled. This extension obviously made it possible to resolve this conflict between the versions of RXJS.

But when i threw my application in production and the clients try to use some features of the application, they notice some bugs with some components from Angular Material.

To Reproduce
Steps to reproduce the behavior:

  1. Use webpack 5 module federation
  2. Create a basic shell and a basic microfrontend
  3. Integrate @angular/material inside your shell or your microfrontend
  4. Integrate "redux-micro-frontend"
  5. You will note that when you try to do : "GlobalStore.Get()" the error above will appear.

Solution
So I investigated and noted that when the "redux-micro-frotnend" library was not integrated no problems occurred. And I quickly came to the conclusion that there was a conflict between the redux library used and rxjs in my application. To solve this problem, I was able to observe two solutions:

  • Grab redux and redux-devtools-extension inside peerDependencies (in package.json)
  • Upgrade the redux version to 4.1.1

I hope i was clear with my explications :)

tmonikat commented

Hi @Flooze-IT , is it possible to share a sample example code with Module federation and redux-micro-fronted.

It will be very useful for developers.

patrickCode commented

There is a PR opened for this, but due to issues in the package.json the PR could not be completed.
@Flooze-IT - can you please rectify the PR, I have put the necessary comments.