originjs / vite-plugin-federation

Module Federation for vite & rollup
Other
2.14k stars 224 forks source link

Shared dependency problem, the style does not take effect after the host calls the remote module #495

Open dadaguai-git opened 10 months ago

dadaguai-git commented 10 months ago

Versions

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.

chipcop106 commented 6 months ago

You should add "element-plus" to shared field in host app config. shared: ["vue", "element-plus"].

cheesypeperoni commented 2 weeks ago

Any findings for this? im facing the same issue