Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error related to RXJS when using Webpack 5 Module Federation #22

Open
Flooze-IT opened this issue Apr 27, 2021 · 2 comments
Open

Error related to RXJS when using Webpack 5 Module Federation #22

Flooze-IT opened this issue Apr 27, 2021 · 2 comments
Labels
bug Something isn't working

Comments

@Flooze-IT
Copy link

** 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
Copy link

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
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants