Federated Modules: Dynamic Remotes with synchronous imports

Feature request

What is the current behavior? Using code from https://github.com/webpack/webpack/issues/11033 it is possible to load code in with dynamic urls asynchronously, however the given solution does not work with ‘synchronous’ imports for example:

import urls from "remoteModule/constants";

async function getSomething(params) {
  // ...Other processing
  return fetch(urls.aThing);
}

The code above would have to be converted to:

async function getSomething(params) {
  const { aThing } = await someKindOfDynamicLoading("remoteModule/constants");
    // ...Other processing
  return fetch(urls.aThing);
}

This doesn’t seem ideal especially for non-jsx code or ‘middleware-like’ code.

What is the expected behavior? See above?

What is motivation or use case for adding/changing the behavior? Not all code needs/wants the async loading of code to be ‘apparent’ like the example above but another example might be a set of constants that builds off another set of constants.

How should this be implemented in your opinion? I’m not sure to be honest, I would imagine something would ‘hook’ into the webpack internals before the async boundary for example:

(async () => {
  await loadModules();
  import("./index");
})();

Are you willing to work on this yourself? Maybe, but I would require quite a bit of assistance as I’m unfamiliar with webpack internals.

[Guriqbal-Singh-Alida]

@jacob-ebey @ScriptedAlchemy issue solved. To explain when we provide multiple entry points, the each entry gets its own runtime by default(https://webpack.js.org/configuration/optimization/#optimizationruntimechunk). Since hooks and react components must share runtime we had to split react and vendor as separate common chunks and configure runtimeChunk as single

entry: {
      main: './src/index',
      'library-loader': {
        import: `${path.resolve(__dirname, 'src', 'startup.js')}`,
        library: {
          type: 'var',
          name: 'LIBRARY_LOAD',
        },
      },
    },
    externals: [
      {
        'library-loader': `promise LIBRARY_LOAD.library`,
      },
    ],
  optimization: {
    splitChunks: {
        chunks: 'all',
      },
    runtimeChunk: 'single',
  }

Thanks for all the support you guys provided

[ScriptedAlchemy]

promise new promise syntax or pass remote an array or valid options, like remote1: [global@url,global@otherUrl]