【vue3-demo】Exporting a component with the same path and name as the host application replaces the host application component when the remote component is used.

[lemontree2000]

Description

I'm using the vue3-demo with the ，Exporting a component with the same path and name as the host application will overwrite the host application component when the remote component is used.

issues

provider directory

provider config

    new ModuleFederationPlugin({
      name: 'home',
      filename: 'remoteEntry.js',
      remotes: {
        home: 'home@http://localhost:3002/remoteEntry.js',
      },
      exposes: {
        './Content': './src/components/Content',
        './Button': './src/components/Button',
        './Layout': './src/components/Layout',
        './Self': './src/Self',
      },
      shared: {
        vue: {
          singleton: true,
        },
      },
    }),

consumer directory

consumer config

    new ModuleFederationPlugin({
      name: 'layout',
      filename: 'remoteEntry.js',
      remotes: {
        home: 'home@http://localhost:3002/remoteEntry.js',
      },
      exposes: {},
      shared: {
        vue: {
          singleton: true,
        },
      },
    }),

use remote component

Expect

It is expected that there should be two lines of text each: Self component. Self component from remote;

Practice

The actual two lines of text both show: Self component from remote; It looks like the remote component overrides the local component

Reproducible code

https://github.com/lemontree2000/module-federation-vue3-demo

[lemontree2000]

There seems to be no problem after the file name and path are changed