Federated Modules: Dynamic Remotes with synchronous imports

[ksrb]

This is part question, part PR but I thought it might make a good candidate to be merged once it works and is cleaned up, this PR is the result of issues from:

• Federated Modules: Dynamic Remotes webpack/webpack#11033
• Federated Modules: Dynamic Remotes with synchronous imports webpack/webpack#12258

The tl;dr of these issues is to allow a remote module to be resolved at runtime, this is possible with code from webpack/webpack#11033 which this PR contains.

The aforementioned code would be utilized like so:

import { loadFromRemote } from "./loader";

const WidgetRemote = React.lazy(async () => {
  const component = await loadFromRemote({
    component: "Widget", remote: {
      url: "http://localhost:3003/remoteEntry.js",
      name: "app3",
    },
  });
  return component();
});

const App = () => (
  <Suspense fallback="Loading widget">
    <WidgetRemote />
  </Suspense>
);

However, this use case isn't ideal for code which would prefer to use synchronous imports i.e.:

import WidgetRemote from "app3/Widget";

A more realistic use case of synchronous imports would be importing a set of constants which the host module could then use to build it's own set of constants, in this case making the code asynchronous would be problematic.

The current example in this PR attempts to utilize the internal keyword mentioned by sokra to delegate the module loading to some internal logic:

new ModuleFederationPlugin({
  name: "app2",
  remotes: {
    app3: "internal ./src/loader.js"
  },
})

The result should be:

However, the current example is throwing the following error:

I did some shallow diving of webpack's internal regarding this issue but wasn't able to resolve this on my own, as far as I can tell it seems like ./src/loader.js isn't even being included in the bundle properly which resulted in me adding:

  entry: [
    "./src/index",
    // This seems necessary for module to even be available
    "./src/loader.js"
  ],

I'm also not sure if I'm providing the right 'container', any help is appreciated thanks!

[CLAassistant]

All committers have signed the CLA.

[ScriptedAlchemy]

webpack/webpack#12258 (comment)

[ScriptedAlchemy]

This is a fix, right, not an example of a problem. Just checking before mergeing

[ksrb]

This is a example of a problem, not a fix.

This PR represents code that is not working using the examples of code from:
webpack/webpack#12258

Feel free to ask for more context, the issues are quite long so it might be a bit muddled 😅.

[ksrb]

Just noticed the comments left by Guriqbal-Singh-Alida and jacob-ebey on the issue and his respective repo at https://github.com/jacob-ebey/fed-internal-remote-browser.

Might try integrating the code from the repo and seeing how it goes but the approach seems a bit... complicated.

[Guriqbal-Singh-Alida]

@ScriptedAlchemy and @ksrb please check latest comments webpack/webpack#12258 (comment) , the approach doesnot fully work specially if you are importing react in exposed module

[ScriptedAlchemy]

if you find a solution please PR it, some will reload the remote containers to re-attach new sharing scopes that were lazy added

[Guriqbal-Singh-Alida]

@ScriptedAlchemy @ksrb it is solved now please check webpack/webpack#12258 (comment)

[17biubiu]

I met the same issue, What I am more puzzled is that it is easy to develop locally， but when i build and then deploy it to server, it not work. the error is "fn is not function"

[ksrb]

Looked over everything and updated the PR to utilize the plugin created by matthewma7 from #566.

The end result will look like this:

To utilize the plugin you have to do this following:

Host (app1) webpack.config

const config = {
   ...otherConfigs
  plugins: [
    new ModuleFederationPlugin({
      name: "app1",
      remotes: {
        app2: "app2@[window.app2Url]/remoteEntry.js"
      }
    }).
    new ExternalTemplateRemotesPlugin(),
  ]
}

Host (app1) source somewhere before loading main entry file

window.app2Url = "//localhost:3002"; // Whatever the url/logic to determine your remote module is

import("./bootstrap");

The remote module doesn't have to change just make sure your global window variable for the remote url and the module name are different, aka make sure app2 and app2Url are different strings.

[ksrb]

@ScriptedAlchemy feel free to close or merge this PR I think this issue has been resolved.

[AboyL]

This plugin doesn't seem to solve the caching problem

module-federation/external-remotes-plugin#4
#2449

[Hezard]

Hi @ksrb, could you please explain how this synchronous imports work?
As, I understand ExternalTemplateRemotesPlugin enables ability to define remote containers urls via window object at runtime.
But how are we getting synchronous imports to be able to work, this looks like a webpack magic.
I checked webpack docs and I don't see anything about this kinda behavior.