How can I share dependencies without having esposes and remotes?

[vikdet]

We have the following application structure:
host_app: AngularDart.
independent_app_1 : TS + react
entry: index.js
independent_app_2 : TS + react
entry: index.js

The idea, is to use Module Federation to share common dependencies like react between TS independent apps.

The integration between host app and independent apps are done via web components.

The flow is the following:
host_app injects to the page independent_app_1/index.js, then independent_app_1 injects independent_app_2/index.js. Each index.js defines web component to be used by other apps.
I configured Module Federation plugin to share react and react-dom. But when index.js are loaded, they each loads it's own react and react-dom.

Is there a way to share dependencies without having remoteEntry.js?

UPD:
I found that dependencies are not shared, if use custom chunks naming like:

optimization: {
      splitChunks: {
        cacheGroups: {
          react: {
            test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
            name(module: { context: { match: (arg0: RegExp) => string[] } }) {
              // Get the module name, e.g., node_modules/packageName
              const packageName = module.context.match(/[\\/]node_modules[\\/]\.pnpm[\\/](.*?)([\\/]|$)/)[1];
              return `${packageName}`;
            },
            priority: 10,
            enforce: true,
          },
        },
        ```