How shared libraries work in ModuleFederationPlugin.

courtesy: https://scriptedalchemy.medium.com/micro-fe-architecture-webpack-5-module-federation-and-custom-startup-code-9cb3fcd066c

This is in continuation to the previous article https://mytechlearns.blogspot.com/2022/06/single-spa-using-single-spa-react-and.html. Application discussed below refers to the application mentioned in the previous article and code is shared in GitHub

In this article lets see how shared libraries work in the ModuleFederationPlugin and also how we can run the two different versions of react can run in the host application (host uses the react version of 17.0.2 and remote uses version 18.2.0).

Lets take a look into the shared section of MFP.

Shared section represents the shared libs that will be shared with the host application or with the other remote application or with both.

Similar to split chunks plugin, MFP splits your application into multiple chunks based on the shared dependencies provided.

For example with the above configuration if we run webpack, it will generate the below files.

If you see MFP has split the application into multiple chunks for each library we mentioned in the shared section,

For example vendors-node_modules_react_index_js.js — contains the react library.

If host application also uses the same react library, same version and also in the same scope, then the library is shared among both the host app and remote app, which mean when the host app has loaded the chunk then the remote app only loads the application code, it will not load the library again

For remote and host application we created earlier. When running the host application, open the networks tab in developer tools you will see the below.

The host has downloaded  only the remoteEntry, src_testorg-mfeo1_tsx.js and the single-spa-react file but not react and react-dom libraries as the host has already downloaded it.

This is how the libraries are shared between applications using MFP, there by decreasing the remote application loading time and increasing the performance.

Now we will see how to run different versions of react in the host application.

Lets say we want to use different version of react on remote app

Host app: 17.0.2

Remote app: 18.2.0

Update the package.json in remote app as below and run npm install

"react": "^18.2.0",

"react-dom": "^18.2.0",

If you build the remote application and refresh on the host application, you will see the below warning on the console

This is because as we mentioned in the shared section as singleton: true, MFP tries to load only one version of application and throws the warning at you

Now if you look at the network tab, it has downloaded the react library from the remote app (localhost:8082) as shown below. Which means MFP has choosen the best version among 18.2.0 and 17.0.2, and downloaded the 18.2.0 from remote application.

To handle this and run both versions, Follow the below steps

open the webpack config of the remote app , and make the below changes.

What we are trying to do is to change the share key in line 42 and 47 for react and react Dom (earlier share key and the import package is same)

And in line 43 and 48 we are importing the actual library.

Now if you build and run the remote app, and refresh the host app. You will see the host app has downloaded the react and react-dom library versions 18 from the remote app.

You will see the file “vendors-node_modules_react_index_js.js” has downloaded twice one has the version 17 used by the host and another has version 18 used by remote.

This is the beauty of the MFP, where you not only run applications with different frameworks (angular, vue, react etc) but also different versions of same framework as shown above

References:

https://scriptedalchemy.medium.com/micro-fe-architecture-webpack-5-module-federation-and-custom-startup-code-9cb3fcd066c