Eager option seems to be not working on dependencies used by both host & remote

[martinkadlec0]

I've been playing around with the example code, and I got stuck on the eager: true option.

Even If I set it on react/react-dom in the host app I still get Uncaught Error: Shared module is not available for eager consumption: webpack/sharing/consume/default/react/react

I tried using eager: true on react on both host & remote as well, but that doesn't help. The only time it makes difference is if I use it on dependencies that are shared but only used by the host itself and not by any remotes.

My home webpack.config.js

new ModuleFederationPlugin({
      remotes: {
        'nav': 'nav@http://localhost:3001/remoteEntry.js',
      },
      shared: {
        ...deps,
        'react': {
          eager: true,
          singleton: true,
          requiredVersion: deps.react,
        },
        'react-dom': {
          eager: true,
          singleton: true,
          requiredVersion: deps['react-dom'],
        },
      },
}),

I put the App.jsx code directly to index.js (so there is no dynamic bootstrap import).

[martinkadlec0]

Closed this since this is probably not the right place to ask this.

[wingonlai]

@martinkadlec0 Hello. Have you found any thing for this issue?

[martinkadlec0]

@wingonlai nope, I ended up using bootstrap file in all projects. The eager option looks broken to me or I don't understand it.

[wingonlai]

Yeah same here. I tried different things but only the bootstrap file method works. I am creating a React component and I am just trying to give the consumers some flexibility without forcing them to add in a bootstrap file. It seems like the only way though. Thank you.