question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Singleton instantiated multiple times, despite same version being provided to all modules

See original GitHub issue

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 loads the Remotes in exactly the same way as the example project above does (see https://github.com/module-federation/module-federation-examples/blob/master/dynamic-system-host/app1/src/App.js#L3)

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.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:10 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
csvancommented, Jan 22, 2021

@jacob-ebey I fully understand that, and as I mentioned this is unfortunately a pretty complex proprietary project, so not much I can share that fully reproduces the issue. I appreciate your help and will leave another comment here if I get bootstrapping to work.

1reaction
csvancommented, Dec 27, 2020

Another note: I have observed this behavior for third-party libraries as well, notably https://github.com/styled-components/styled-components, the entire code for that library is also a part of the Remote bundle even though it is specified as a shared singleton in both Shell and Remote.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular module federation singleton service initiated multiple ...
When testing the shell, i noticed that the singleton service is being initiated twice, first time when loading the shell, second time when ......
Read more >
Singletons And Shared Instances - Alain Schlesser
In general, when you instantiate a class, you create a new instance of that class. But for some objects, you want to always...
Read more >
Singleton services - Angular
A singleton service is a service for which only one instance exists in an application. For a sample application using the app-wide singleton...
Read more >
Singletons in Java | Baeldung
In this quick article, we'll discuss the two most popular ways of implementing Singletons in plain Java. 2. Class-Based Singleton.
Read more >
Learning JavaScript Design Patterns
To provide a holistic understanding of the past and present of design patterns, this book will present ES2015+ and class (ES5) versions of...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found