module-federation
The configuration between the shell and module in Module Federation for shared libraries is not working.
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:
config module:
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.
can u helpme?
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
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.
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,
},
}