Is this the way to both share and expose stuff?

[nkalinov]

Context:
Let's say I have 2 MFEs - a Host (@corp/host) and an UI lib (@corp/ui) that exposes multiple React components and some of them reuse (or compose) other exposed components.
Let's assume for the example that the UI lib has 2 components - Button and Spinner. They are exposed separately but the Button also import Spinner from '../Spinner';.

Webpack Configurations:
The host has configured the UI lib as a remote:

// Host webpack.config.js - only relevant parts of ModuleFederationPlugin
shared: {
  '@corp/ui': '*'
},
remotes: {
  @corp/ui: 'ui@http://localhost:3999/remoteEntry.js'
}

The UI lib exposes some components:

// UI lib webpack.config.js - only relevant parts of ModuleFederationPlugin
exposes: {
  './Button': './src/Button',
  './Spinner': './src/Spinner',
}

Issue:
The Host app is consuming the Spinner separately in a parent component but when it loads a @corp/ui/Button, the Spinner code is duplicated in the Button chunk.

Expected result:
I was expecting that the Host will provide the Spinner to Button automatically but it didn't.

Workaround / Question:
The only solution that I found is to:

1. Add the UI lib to its own shared object with a trailing slash (so that all subpaths are affected too).
2. Use absolute paths internally. So Button imports Spinner with import Spinner from '@corp/ui/Spinner'; instead of ../Spinner

Final UI Lib config sharing and exposing itself:

// UI lib webpack.config.js - only relevant parts of ModuleFederationPlugin
shared: {
  '@corp/ui/': '*'
},
exposes: {
  './Button': './src/Button',
  './Spinner': './src/Spinner',
}

1. Is this how I'm supposed to do that or I'm missing something?
2. Is there a simpler way?
3. Why doesn't relative path work?