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

The configuration between the shell and module in Module Federation for shared libraries is not working. #3135

Open
gferreyra12 opened this issue Aug 24, 2023 · 5 comments

Comments

@gferreyra12
Copy link

I'm having issues restricting versions of shared libraries between two Micro Frontends (MFEs). In theory, the shell, with requiredVersion, should condition certain versions for the module to avoid incompatibility. However, during implementation, both MFEs are being successfully launched without any problems. The goal is to have the shell differentiate supported versions and have the module, based on the moduleFederation.config, use its own version of the shared library as long as it falls within the version range specified in the shell. With this solution, I aim to allow the module to decide which version to use for one shell and another version for another shell, enabling the reuse of the same module. I've attached the configuration to see if I'm doing something wrong, and if you could assist me with this issue.

config shell:

image

config module:

image

In this example, the module has the version of Material in its package.json as 5.14.3. In the implementation, communication should not be supported, and it should prioritize the version from the shell or throw an error.

Tests conducted:

Deletion of node_modules and package.lock
Cache clearing
Launching the shell first and then the module
Implementing the strictVersion provided by the moduleFederation plugin
I'm using React 18 and the latest version of Webpack.

Additional information: I modify the plugin to override CSS classes, as they were being overwritten if both MFEs had the same name, by adding the project's name in front. I've attached tests and how this fix is implemented.

image

can u helpme?

@ScriptedAlchemy
Copy link
Member

You are pinning versions, requiredVersion: "XXX" means it will explicitly only share if exact match

^1.2.3 vs 1.2.3 the ^ is needed

@gferreyra12
Copy link
Author

Of course! In the example I mentioned, I used a specific version to show that the communication between the ModuleFederation instances is not working for me.
I understand that by using ^1.2.3, I am specifying a range of versions from the shell that the module must adhere to. If the condition is not met, the module takes the version from the shell. If the module's version falls within the specified range but is different from the shell's version, the module uses its own version.
The issue I am facing is that it's not recognizing the configuration I'm using in the ModuleFederation plugin to differentiate between the versions.

@sood21-js
Copy link

I have same problem.

@sood21-js
Copy link

sood21-js commented Sep 4, 2023

I think I have found a solution to this problem. It seems to me that this is not quite the right way to solve the problem, because the webpack itself should solve problems with versions, but it works
Try to define a different scope for your external packages in shared by this example

shared: {
    ['some-packege']: {
      requiredVersion: deps['some-packege'],
      import: 'some-packege',
      shareKey: some-packege',
      shareScope: 'example',  //not default
      singleton: true
    },
    react: {
      requiredVersion: false,
      singleton: true,
    },
  }

@ScriptedAlchemy
Copy link
Member

Sharing may improve next quarter as we are redesigning federation

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants