module-federation-examples icon indicating copy to clipboard operation
module-federation-examples copied to clipboard

The third-party UI library is referenced in the remote module, and the local UI library does not work

Open czh1998yr opened this issue 3 years ago • 1 comments

Hello, I used the third-party UI Library in the remote module and shared it in shared, but when I use the components in the remote module locally, the style and so on do not work. I don't know whether I need to install the same third-party UI Library in the local project as in the remote module to take effect

This is the configuration in remote

const { defineConfig } = require('@vue/cli-service');
const webpack = require('webpack');
const deps = require('./package.json').dependencies

module.exports = defineConfig({
  pages: {
    index: {
      entry: './src/index.ts',
    },
  },
  publicPath: "http://localhost:3001/",
  configureWebpack: {
    optimization: {
      splitChunks: false,
    },
    plugins: [
      new webpack.container.ModuleFederationPlugin({
        name: 'home',
        filename: 'remoteEntry.js',
        exposes: {
          "./Content": "./src/components/Content.vue",
        },
        shared: {
          ...deps,
          vue: {
            singleton: true,
          },
          "ant-design-vue": {
            singleton: true,
          }
        },
      }),
    ],
  },
  transpileDependencies: true,
  devServer: {
    port: 3001,
  },
});
<template>
  <a-empty :description="description" />
  <span style="color: #008c8c">{{ description }}</span>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const description = ref("TEST");
</script>

<style></style>

This is the configuration in the local

const { defineConfig } = require('@vue/cli-service');
const webpack = require('webpack');

module.exports = defineConfig({
  pages: {
    index: {
      entry: './src/index.ts',
    },
  },
  configureWebpack: {
    plugins: [
      new webpack.container.ModuleFederationPlugin({
        name: 'host',
        filename: 'remoteEntry.js',
        remotes: {
          home: 'home@http://localhost:3001/remoteEntry.js',
        },
        shared: {
          vue: {
            singleton: true,
          },
        },
      }),
    ],
  },
  transpileDependencies: true,
});

This is an error message

image

Only text messages can be displayed, while components in the third-party UI library cannot take effect

czh1998yr avatar Feb 25 '22 08:02 czh1998yr

@czh1998yr the ant-design-vue is also defined and registered on the app shell?

schirrel avatar Jun 01 '22 01:06 schirrel