WP5 Module Federation: Sharing deep imports

Question

Say I have the following Module Federation setup:

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

This let's me share an import like the following with remotes:

import { myThing } from 'my-shared-lib';

However, what if I want to share a deep import, such as the following?

import myThing from 'my-shared-lib/things';

Doing this with the above setup seems to create a separate instance of the module in both the host and any remotes, which is perhaps understandable since we are not technically sharing the deep import. However, is there any way to get Module Federation to do so?

Answer 1

You should be able to the deep import as :

shared: {
  'my-shared-lib': { singleton: true, eager: true, requiredVersion: '^1.0.0' }
  'my-shared-lib/things': { singleton: true, eager: true, requiredVersion: '^1.0.0' }
}

They will still be two separate chunks, but will be shared by multiple remotes/hosts.

Answer 2

Webpack also handles any prefix path with a / at the end so if you don't care about being specific, you can use:

shared: {
  'my-shared-lib': { singleton: true, eager: true, requiredVersion: '^1.0.0' }
  'my-shared-lib/': { singleton: true, eager: true, requiredVersion: '^1.0.0' }
}

Reference: https://github.com/webpack/webpack/blob/main/lib/sharing/resolveMatchedConfigs.js#L77-L79