WP5 Module Federation: Singleton instantiated multiple times

Question

Unfortunately, my repro for this is in a complex proprietary project, so I will do my best to explain what is going on.

The closest example project to my use-case is this one: https://github.com/module-federation/module-federation-examples/tree/master/dynamic-system-host Essentially, I have an omnidirectional setup where a single Shell App consumes a set of Remote Apps. Remote Apps are discovered during runtime, and are hence not specified in the Webpack config.

The Shell, as well as all Remotes, have a dependency on a shared library, my-shared-lib:

"dependencies": {
    "my-shared-lib": "^1.0.0"
}

The Shell, in its Webpack config, exposes this lib as an eager singleton:

new ModuleFederationPlugin({
  name: 'shell',
  filename: 'shellDefinition.js',
  shared: {
      'my-shared-lib': { singleton: true, eager: true, requiredVersion: '^1.0.0' }
  },
}),

The Remotes, in their configs, also have it as shared, but not eagerly:

new ModuleFederationPlugin({
  name: 'remoteNameHere',
  filename: 'remoteDefinition.js',
  exposes: {
    './app': path.join(modulePath, 'app.js'),
  },
  shared: {
      'my-shared-lib': { singleton: true, eager: false, requiredVersion: '^1.0.0' }
  },
})

The problem is this: I have verified both by runtime debugging and inspecting the bundles generated by Webpack that this lib is being included and instantiated several times - once for the shell, and once for each remote. The code for the lib is even present in the bundle for the Remote which Webpack loads when fetching the exposed ./app.js.

I am at a loss for understanding what is going on here. I have tried to also share every single dependency of my-shared-lib, but this does not help.

My expectation would be that the Remotes use the instance of my-shared-lib which is shared by the Shell, rather than creating their own instances.

Have I completely misunderstood how dependency sharing works, or am I doing something else wrong?

It should be noted that both the Shell and the Remots all have single entry points.

What do you mean by included/instantiated for every remote? Are you getting multiple chunks loading from multiple urls? — Daniel Tabuenca, Feb 21 '21 at 02:30

score 0 · Answer 1 · answered Dec 29 '20 at 13:50

for your remotes webpack Module Federation configurations try removing the singleton option (having it set in both configs may be the problem, you want only one app to initialise the singleton) and eager option (I think it is false by default, this option tells to load the dependency before checking for shared ones, so you use it mainly on containers app). That's what I do on my configs (multiple remotes) and it seems to work well:

new ModuleFederationPlugin({
  name: 'remoteNameHere',
  filename: 'remoteDefinition.js',
  exposes: {
    './app': path.join(modulePath, 'app.js'),
  },
  shared: {
      'my-shared-lib': { requiredVersion: '^1.0.0' }
  },
})

PS (we never know): You may have problems with tree shacked libraries when using module federation, it downloads all the whole library when putting them on shared.

WP5 Module Federation: Singleton instantiated multiple times

1 Answers1