module-federation-examples
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
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
Only text messages can be displayed, while components in the third-party UI library cannot take effect
@czh1998yr the ant-design-vue
is also defined and registered on the app shell?