Aurelia 2 and webpack module federation plugin

Help Requests
1

I am currently working on a simple Aurelia 2 project. I am trying to achieve component and vendor sharing between a host and a remote application using the webpack module federation plugin.

In my setup I have a function and a component in the remote which need to be shared to the host. Everything works fine regarding this.

The problem is when it comes to vendor sharing. I want to be able to share the aurelia module, so the host loads it from the remote app. Naturally, I register ‘aurelia’ in the shared prop of the ModuleFederationPlugin in my webpack.config files for both the host and remote apps. Here are some relevant files:

  1. webpack config files (left pic - host config, right pic - remote config)
    2configs
    2configs1757×1080 133 KB
  2. entryPoint files for the webpack config are the same in both host and remote
//@ts-ignore
import('./main');
  1. main.ts files
    host app:
import Aurelia from 'aurelia';
import { MyApp } from './my-app';

Aurelia
  .app(MyApp)
  .start();

// @ts-ignore
import('app2_remote/mySharedFunction').then(msg => msg.mySharedFunction())
// @ts-ignore
import('app2_remote/mySharedComponent');

remote app:

import Aurelia from 'aurelia';
import { MyApp } from './my-app';
import { mySharedFunction } from './mySharedFunction';

mySharedFunction();

Aurelia
  .app(MyApp)
  .start();

I get 2 aurelia vendor bundles generated: ‘vendors-node_modules_aurelia_runtime-html_dist_esm_index_js.bundle.js’ and ‘vendors-node_modules_aurelia_dist_esm_index_js.bundle.js’

This does not work as expected and when running the host app I get the following error:
Uncaught (in promise) Error: Conflicting @aurelia/metadata module import detected. Please make sure you have the same version of all Aurelia packages in your dependency tree.

And also, in the host app, the ‘vendors-node_modules_aurelia_runtime-html_dist_esm_index_js.bundle.js’ bundle is loaded twice, one time from the remote app (localhost:9000) and one time from the host itself (localhost:9001):

I suppose this is because in the resulting bundles from the webpack build, the module ./node_modules/aurelia/dist/esm is found both in the ‘vendors-node_modules_aurelia_dist_esm_index_js.bundle.js’ (loaded from the remote app) bundle as well as the ‘entry.bundle.js’ bundle (loaded from the host app).

On the other hand, if I include the ‘@aurelia/runtime-html’ module also as a shared module in the config for both apps, everything works just fine - Both apps are running without errors and the host loads every shared aurelia module from the remote just as expected.

Could anyone explain to me why is this the case? And is there any workaround regarding this? I just want to have only the ‘aurelia’ module as a shared module and not have the ‘@aurelia/runtime-html’ in my config also. Thanks in advance.

1 Like
2

Thats because Aurelia expects exactly one occurence of the runtime which gets doubled though if you arent sharing it. Whats the problem with sharing it?

2 Likes
3

Thanks zewa666, this clears everything out. I just wanted to achieve module federation with only one shared vendor module to see if it is possible to do that.

4

hehe had the very same misunderstanding and try at the begin :wink: