0

I'm looking to use a component from a remote application in my host application using module federation. Is it possible to dynamically change the remote url in the webpack.config file to include slugs which can change during runtime?

Webpack config file

  plugins: [
    new ModuleFederationPlugin(
      {
        name: 'MFE2',
        filename:
          'remoteEntry.js',
        remotes: {
          MFE1:
            'MFE1@http://localhost:8083/remoteEntry.js',
        },
      }
    ),
    new HtmlWebpackPlugin({
      template:
        './public/index.html',
    }),
  ],

From the example above i'd like to change the remote url to extract the component from localhost:8083/[slug]/remoteEntry.js

Not sure if module federation supports including components that are created based on the slug in the url?

Any help is appreciated!!

anonymous
  • 161
  • 3
  • 11

1 Answers1

1

In short, you can't do that currently, as webpack does its job at build time and urls are baked into the bundles.

Ticket about this feature

There is an open issue on their tracker about this to make some sort of templating stuff resolved at runtime.

Workaround

There is an official example of using advanced api for dynamic module loading, you completely avoid using "remotes" in your webpack config, and do module loading in your code and compute URLs as you wish.

full example

simplified example

Vasily Scherbenko
  • 11
  • 1