[Webpack 5] Module Federation plugin does not work

[damian131]

I'm submitting a bug report

• Library Version:
  5.0.0

Please tell us about your environment:

• Operating System:
  Windows 10

• Node Version:
  10.18.1

• NPM Version:
  6.13.4

• JSPM OR Webpack AND Version
  webpack 5.42.0

• Browser:
  Chrome 91.0.4472.124 (Official Build) (64-bit)

• Language:
  TypeScript 4.2.4

Current behavior:
Once configuring Webpack Federation Module for two Aurelia projects (one is a host and another one is a remote component), the host is not requesting for remoteEntry.js from the remote component.

Both of the projects have a clean setup built using au new and they are migrated to Webpack 5.

Host's Module Federation plugin config:

Remote Component's Module Federation plugin config:

Remote Component's function definition:

Host using Remote Component's function:

Build has succeeded, but the issue occurs during runtime. remoteEntry.js is not issued by the host:

However it has been successfully generated on the remote component side:

You can find all code in this repo: https://github.com/damian131/aurelia-module-federation

Expected/desired behavior:
remoteEntry.js file is requested by the host which eventually ends up with remote component's function being called on the host side.

What is the motivation / use case for changing the behavior?
Having ability to use Module Federation plugin within Aurelia apps and taking advantage from micro-frontend architecture.

[bigopon]

@damian131 thanks, I'll have a look

[bigopon]

@damian131 I've been able to setup a simple a project with 2 apps connected through module defederation here https://github.com/bigopon/example-au-module-federation

Can you have a try?

m property in the App is a promise of loading the module at app2, so just need to .then(m => m.superFunction() to see some console logging.

[bigopon]

@damian131 forgot to mention that I built the apps independently and run via http-server:
app2: port 8080
app1: any port

[damian131]

Hi @bigopon, thank you so much for taking a look.

Indeed, when trying to import it in this way it is working. What is the reasoning behind that?

Additionally, I've tried to import a remote Aurelia's component to the host and I'm getting:

Any idea how to make it working?

Code: https://github.com/damian131/example-au-module-federation

[damian131]

Hi @bigopon, did you have a chance to look at this?

[bigopon]

Oops sorry, I forgot about this. Will do soon @damian131

[damian131]

Hi @bigopon, sorry for pinging you once again on this - did you have a chance to take a look?

[bigopon]

@damian131 I haven't had a chance yet, but have been keeping a note of this in my mind for whole this week since I recently checked on it for a blog. Will do this weekend.

[bigopon]

I've been able to reproduce the issue, a workaround is to export hello from superFunction:

export const hello = () => import('./hello/hello');

then in usage, we can do

p = import ('app2/hello').then(m => m()).then(m => m.Hello)

[bigopon]

The output when doing a prod build looks like this

This probably means the current plugin is trying to preserve module name even in module federation build.

To fix this, we will need to either:

• find a way to make federation plugin ignore the module name preservation on entry points, or
• find a way to make the plugin aware of the requester being the entry point of a module federation and do not try to preserve the name. This could have complication with the way view is automatically searched.

[ItWorksOnMyMachine]

How would we expose an actual component, a view and viewModel, that renders itself? Basically, taking the example app1 and app2, how would we go about exposing app2's App component to app1 and rendering it on the screen?

I have updated app2's webpack.config.js file to this:

new ModuleFederationPlugin({
      name: 'app2',
      filename: 'remoteEntry.js',
      exposes: {
        './superFunction': './src/superFunction',
        './App': './src/app'
      },
      // shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
    }),

And I can now import the component in app1. I'm just not sure how to actually use it...

[KayvandenHeuvel]

How would we expose an actual component, a view and viewModel, that renders itself? Basically, taking the example app1 and app2, how would we go about exposing app2's App component to app1 and rendering it on the screen?

I have updated app2's webpack.config.js file to this:

new ModuleFederationPlugin({
      name: 'app2',
      filename: 'remoteEntry.js',
      exposes: {
        './superFunction': './src/superFunction',
        './App': './src/app'
      },
      // shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
    }),

And I can now import the component in app1. I'm just not sure how to actually use it...

Hi @ItWorksOnMyMachine , have you found out how to get this to work? We also managed to import the component in app1 but can't seem to find how to get it to render.

[KentuckyMC]

Someone got it to render in Aurelia? Still looking for an answer on this one.