Shared configuration is not supported when dynamic load remote module ??

[yellowbeee]

webpack.config.js

shared: {
          react: {eager: true, singleton: true, requiredVersion: '^16.13.1'},
          'react-dom': {
            eager: true,
            singleton: true,
            requiredVersion: '^16.13.1',
          },
          'react-router-dom': {requiredVersion: '^5.1.2'},
          'mobx-react-lite': {requiredVersion: '^1.5.2'},
          mobx: {requiredVersion: '^5.15.4'},
          axios: {requiredVersion: '^0.19.2'},
 }

when i dynamic loading remote module, it throw error:

Then i find the error is the 'factory' is not a function, it return a Promise

and then i find the step of register shared module, it use 'webpack_require.e', not use 'webpack_require', it will return a Promise

How can I solve this problem ?

[matthewma7]

Based on my experience and understanding.
The error "Shared module is not available for eager consumption" could means that you have a module marked as eager, but it is requiring a shared module that doesn't not have the eager flag. The solution could be marking all shared module eager.

[matthewma7]

I just noticed that even with eager flag, the import('./bootstrap.js') is still needed, otherwise, this error would be thrown.

[ScriptedAlchemy]

if you have multiple entry points, or use runtimeChunk:single - this could happen. We see it with setups like next.js

[lynnic26]

if you have multiple entry points, or use runtimeChunk:single - this could happen. We see it with setups like next.js

I have only one entry point and runtimeChunk use default, this still happen.
Any solutions?

[Rfank2021]

@yellowbeee have you solved the problem?

[Rfank2021]

I found if I follow https://github.com/module-federation/module-federation-examples/tree/master/basic-host-remote/app1, and also remove the remote app's eager:true, it will work, but seems the page load time is too long, not sure if it's because of it.

[Rfank2021]

@ScriptedAlchemy I feel most people don't understand what eager consumption means, maybe it's better to have a wiki explaining what it really means? If we don't understand, when we meet the issue, we can only treat it as black box, and try randomly.

[Rfank2021]

If remote set to eager:true, local should also set to eager:true, also bootstrap is needed to make sure only one react is in the initial chunk. Also don't forget to use bundle-loader or for most new cases just add "module": "esnext" to tsconfig, otherwise typescript will have problem on dynamic import.