vite-plugin-federation
vite-plugin-federation copied to clipboard
Shared dependency problem, the style does not take effect after the host calls the remote module
Versions
- vite-plugin-federation: v1.2.3
- vite: v4.4.5
- element-plus:v2.3.12
Reproduction
If you use the element-plus ui component library remotely to create an A component, and the host uses the A component, the element-plus style effect will be lost. Share has been configured remotely, but it cannot take effect.
Additional Details
remote: import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import federationPlugin from "@originjs/vite-plugin-federation";
// https://vitejs.dev/config/
// 远程模块
export default defineConfig({
plugins: [
vue(),
federationPlugin({
name: "remote_app",
filename: "remoteProvider.js",
exposes: {
"./utils": "./src/utils.ts",
"./src/components/HelloWorld": "./src/components/HelloWorld.vue",
"./src/components/Button": "./src/components/button.vue",
},
shared: ["vue", "element-plus"],
}),
],
server: {
port: 6001,
},
// 打包配置
build: {
target: "esnext",
},
});
host:
import federationPlugin from "@originjs/vite-plugin-federation";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/
// 本地模块
export default defineConfig({
plugins: [
vue(),
federationPlugin({
remotes: {
remote_app: "http://localhost:6001/assets/remoteProvider.js",
},
shared: ["vue"],
}),
],
server: {
port: 5001,
},
// 打包配置
build: {
target: "esnext",
minify: false,
},
});
What is Expected?
It is hoped that the remote module style used by the host will take effect
What is actually happening?
There is no style. The current solution is for the host to complete the dependencies required for remote.
You should add "element-plus" to shared field in host app config. shared: ["vue", "element-plus"].
Any findings for this? im facing the same issue