Search code examples
webpackwebpack-5micro-frontendwebpack-module-federation

Webpack 5 Module Federation - Shared library issue


I have an npm module which I'd like to share between my host and remote apps, but when I'm debugging the app, it is obvious that for example a singleton class (from the npm module) is instantiated twice, first the debugger hits the module loaded by the host app, and then the same thing happens but this time using the module loaded from the remote app.

I have set all the settings (singleton, requiredVersion, eager: true) as per documentation, versions perfectly match - what am I missing? Is there a working example I could look at? Thanks.

(Btw a very similar issue is described with more details here: WP5 Module Federation: Singleton instantiated multiple times)


Solution

  • Finally I got a break through. I went through my problem with a colleague who spotted that webpack doesn't emit any message for my library ('consume shared module / provide shared module') whereas such a message was there for react and other libraries. The library project didn't properly support ESM which caused webpack to exclude it (without an explicit error message which isn't ideal). Fixing the library to be CJS+ESM fixed the problem, only a single instance is loaded, Singletons finally work - happy days :)