How solve Shared module is not available for eager consumption typescript react

Question

I have created an application (app1) with the following webpack.config.js:

new ModuleFederationPlugin({
            name: "app1",
            filename: "remoteEntry.js",
            exposes: {
                "./app1": "./src/components/Sidebar",
            },
            shared: [
                {
                    ...deps,
                    react: {
                        eager: true,
                        requiredVersion: deps.react,
                    },
                    "react-dom": {
                        eager: true,
                        requiredVersion: deps["react-dom"],
                    },
                    "react-redux": {
                        eager: true,
                        requiredVersion: deps["react-redux"],
                    },
                  ....
                  })

and the host applications with the following webpack.config.js:

new ModuleFederationPlugin({
            name: "host",
            remotes: {
                app1: "app1@http://localhost:3002/remoteEntry.js",
            },
            shared: [
                {
                    ...deps,
                    react: {
                        eager: true,
                        requiredVersion: deps.react,
                    }
                },
            ]
        }),

When I start the host application it shows:

  Shared module is not available for eager 
  consumption:webpack/sharing/consume/default/react/react

I tried the bootstrap.js approach. In my case I created the bootstrap.tsx file, copied the content of the index.tsx into it, and then imported bootstrap.tsx in an index.tsx. Also added script tag with remoteEntry.js of app1. Still, it does not work.

If I comment the code in host application where I have called app1 component it works. But I use it then this error is coming.

How to resolve this?

In the following sequence, the files are getting called. Please check the image

Error goes like this

Answer 1

I have the same issue, my solution is:

1. The extension of bootstrap and index file should be .js
2. In index.js file, use import('./bootstrap.js') instead of import './bootstrap.js'

This works for me.