Uncaught Error: Shared module is not available for eager consumption

If you are trying to share modules between Module Federation microfrontends, you might face the following strange error.

Uncaught Error: Shared module is not available for eager consumption

In this article, I will explain the reasons you might see this error and ways to resolve the issue

=======================

Reproduce the Error

First, let's reproduce the error to understand it better. Please, follow along with me.

Clone the project from the different Github repositories

Follow the following article to clone the three microfrontends from Github

You will have products and other microfrontends. Let's make sure the developer tools are running on the Products microfrontend

========

Sharing React

Let's add react to Products Microfrontend as follows

1. Stop the project with ctrl + c
2. Add react as a shared module in shared/Products/webpacl.config.js

shard: ['react]        

Now let's start the project again.

yarn run start        

When you refresh https://localhost:8001, you will see the error in the development tools console as shown above. Also, you will notice that it failed to render the content.

==============

Solving the issue

If you look, again, into the network tab, you will notice that it is loading the dependency (React) Late. We need to delay this by moving the code into a bootstrap that we import in the index.js

The solution is to rename index.js to bootstrap.js and create a new file called index.js and put inside it

import('./bootstrap.js');        

save both files and get back to the browser and refresh. You will see that it is rendering and the error disappeared.

This solution will allow webpack to load the dependencies before loading bootstrap.js