Uncaught Error: Shared module is not available for eager consumption in React module federation

Question

consumes:146 Uncaught Error: Shared module is not available for eager consumption: webpack/sharing/consume/default/@emotion/react/@emotion/react?99ca
    at Object.__webpack_require__.m.<computed> (consumes:146)
    at __webpack_require__ (bootstrap:24)
    at fn (hot module replacement:61)
    at Module../src/index.tsx (utils.tsx:123)
    at __webpack_require__ (bootstrap:24)
    at startup:4
    at startup:6

new ModuleFederationPlugin({
      name: 'app-name',
      remotes: {
       app: 'XYZ/remoteEntry.js',
      },
      shared: {
        'react-dom': {
          eager: true,
          singleton: true,
        },
        react: {
          eager: true,
          singleton: true,
        },
        '@emotion/react': {
          eager: false,
        },
      },
    }),

Same config is present in the shared portion of the app which is sharing these components, but getting above error. I have tried @emotion/react: {eager: true}, with completely removing '@emotion/react' from shared section. But no luck.

Answer 1

Not sure if it's related to HMR, but have you enabled dynamic import for typescript?

https://github.com/Microsoft/TypeScript/issues/16820

What does your index.tsx look like?

Answer 2

We need to give our app a little bit of time to consume the remote components. So we need to change the content of index.js as.

//index.js
import bootloader from "./bootloader";
export default {}

And replace the content of bootloader.js with the previous index.js. This gives webpack runtime a little time to get the asynchronously loaded stuff.