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

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 ?

[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.

[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.