aurelia / aurelia/webpack-plugin

[Webpack 5] Module Federation plugin does not work

Open
#186 14 comments 4 reactions 0 assignees View on GitHub
Module Federation question
Dominant language
TypeScript
Stars
89
Forks
33
PR merge metrics
No merged PRs in 30d

Description

**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:
![image](https://user-images.githubusercontent.com/6074920/125778649-563646ed-2d1b-49ed-b2e5-905977f6f24f.png)

Remote Component's Module Federation plugin config:
![image](https://user-images.githubusercontent.com/6074920/125778699-9ff6d92b-9b16-466d-bce0-71657f852d39.png)

Remote Component's function definition:
![image](https://user-images.githubusercontent.com/6074920/125778839-2711ceec-d484-46d5-b241-361f38820888.png)

Host using Remote Component's function:
![image](https://user-images.githubusercontent.com/6074920/125778919-96bca33b-120b-4078-938b-a335c059a4b9.png)

Build has succeeded, but the issue occurs during runtime. `remoteEntry.js` is not issued by the host:
![image](https://user-images.githubusercontent.com/6074920/125779546-c3717810-35b9-4d73-9250-45703fe7bdfb.png)

However it has been successfully generated on the remote component side:
![image](https://user-images.githubusercontent.com/6074920/125779871-f1c142bc-b376-4ce0-befd-3b6b2f4c82d9.png)

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.

Contributor guide

Open the contributing guide

Research direction

Clone the linked aurelia-module-federation reproduction and start by running the host and remote Aurelia projects with their shown Module Federation configurations. Inspect the browser network activity and generated remoteEntry.js; done means the host requests remoteEntry.js and invokes the remote component function at runtime.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript, webpack
Domain
build-system, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.