Problem/uncertainty when share react and library with react as peer dependency

[tho-graf]

Hi,

we introduced module federation a few month ago in our product. Our product is developed by 6 teams and we have around 30 microfrontends. The microfrontends are developed independently and are clued together at runtime. All microfrontends use react but are rendered in different react trees.

We started to load the code via module federation and share react and react-dom. That works fine. The majority is already using react 19. But some teams are blocked by dependencies, which are not supporting react19 or didn't find the time.

This works fine when we only share react. But if we share a library using react as a peer dependency, the app breaks. (I think this is also described here or here. The examples in the module-federation repository only share react and no dependency using react as a peerDependency.

We build a little demo here: I haven't quite got to grips with the shareScopes yet. But I thought we can use them to solve this problem. But in the compiled/downloaded code, one can observe that the shared-lib with react as a peer dependency has a fixed version of react.

"use strict";
(self.webpackChunkremote_b = self.webpackChunkremote_b || []).push([["775"], {
    340: function(e, t, r) {
        // r(388) will inject react but with a fixed version.
        var s = r(388); 
        // .....
            s.useState)(0)
        // .....
}]);
//# sourceMappingURL=775.be767a5d.js.map

And only the first microfrontend loads the app. Which means the other microfrontend will render with two different react versions.

As mentioned in the above linked github issues, we can set a different shareKey (our repro here works now). But this will load the shared-lib twice (each has a fixed react version).

I thought that it would be possible to load the code just once and just initialize the code twice (with different react versions injected).

Is this somehow possible? Or is the "fix" with the shareKey the preferred solution? I have the feeling that this will increase massively the overall size again if all shared dependencies with peer dependencies will be downloaded in each version combination.

[tho-graf]

@ScriptedAlchemy could you help (clarify) us here?

Thanks in advance!

[tho-graf]

or @2heal1 can you maybe answer the question? Thanks :)

[ScriptedAlchemy]

react needs to be shared as a singleton