Open damian131 opened 3 years ago
@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:
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.
I'm submitting a bug report
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.![image](https://user-images.githubusercontent.com/6074920/125779546-c3717810-35b9-4d73-9250-45703fe7bdfb.png)
remoteEntry.js
is not issued by the host: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.