Webpack Module Federation Tips & Tricks.

I sound like very hype judging by the title. However, my intention is naïve. Just want to tell you what have I been through while I am working in a Typescript, Module federation so-so micro frontend project.

This is gonna be a micro blog post so it’ll be finish soon. I am cutting chase and getting directly point:

Typings: Who you think you are, insignificant federated module?

This is what my host application said while I was trying to import my remote application into it.(I feel you’ll about the quit to read. I was start to saying micro frontend and then continue with host/remote application now, that might make you what the heck am I reading. I am afraid you’re totally making sense. In micro frontend architectures; there at least is a macro app for which major concern is orchestrating the micro apps. Same concepts in module federation translated as host and remote app. But there’s a slight difference. (Now we lose the cabin pressure and this is a disclaimer that is not a micro blog post anymore. You either sit tight and bare with me or feel free to eject!) — Wait! Was this a second parenthesis inside parenthesis? Paranthesisception? —
Difference of the host/remote apps from macro/micro app (and we’re calling at work platform/plugin apps! Surprise MoFo) — Crap! I did it again Paranthesisception!!! — is host app in module federation context, can be a remote app as well. Meaning they are bi-directional. It can both consume or consumed. However, on micro frontend app architecture. You would not expect your macro app to be used as micro app and added as dependency in another micro app in your project. In Webpack, it does because I don’t know. They just did it that way.) Anyyhow! I came here to tell you typings… Host app (don’t be a cry-baby you know what’s what!) written in Typescript, does not infer the remote app by looking at its `import` path. Because it actually does not exist in anywhere. It’s the module federation does the magic and packed it up for itself to understand. (I am really craving to diverge to topic again and getting into Webpack Modules, ES Modules and good ol’ CommonJS modules but thank god fellas we have @hwclass for that! — https://dev.to/hwclass/how-buildless-is-possible-today-4ocp) Of course Typescript does not give damn about the Webpack’s Module (I am making quote sign with my index and middle finger right now when I am saying Webpack Module) and has no faintest idea about this alien module. Typescript wants to know it. I was on the Typescript’s side for this and as a new kid in the town, looking here and there. Not so very long I found where the Kool Kids are hanging: https://github.com/module-federation/module-federation-examples/issues/20

I may be late to party a bit, but expecting huge impact on my very own approach: https://github.com/module-federation/module-federation-examples/issues/20#issuecomment-787123012 (hey there next employer! This is the shameless self-promotion for ya!)

I’ve got also quite nice conversation with the author of the package for which I relied on my solution: https://github.com/pixability/federated-types/issues/4

These conversations can enrich and grow or totally goes to trash bin in future who knows? So, stay tune…

Mocking the Federated module: But `jest` this module is not actually exist how can I get this module in real for ya?

That’s right I just took the first fresh sip of my tea (because coffee is suck in mornings!) and was prepping myself to the best part for it!

But jest dude wasn’t having the fun like I did, and it said:
— file it or didn’t happen?
What I am trying to say is here, If you want jest to mock a module, jest ask you back where’s the module? Without actual module `jest` don’t mock it as a default behaviour.
Aaand I was desperate again and hanging the losers bar top: https://stackoverflow.com/questions/66387224/mocking-federated-modules-in-host-application-for-jest

For this. I didn’t have to suffer for a lifetime and this cool kid(testacode) have shone on my dawn.

https://github.com/webpack/webpack.js.org/issues/4160
this marvelous mate already found the youth fountain and publicize it. Of course, I greedily use this solution and enjoy the rest of my tea. (Solving this one was really short compare the typings)

These 2 significant take on I can name so far. If you skip the bullshitting I made, and get the main take-aways : You made this post worth to read!

…and for this, I salute you.

Happy federation folks!