webpack-plugin

webpack-plugin copied to clipboard

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.

@damian131 thanks, I'll have a look

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

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

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

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

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

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

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

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)

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.

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

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.

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