vite-plugin-federation icon indicating copy to clipboard operation
vite-plugin-federation copied to clipboard

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

Open tuskermanshu opened this issue 1 year ago • 2 comments

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.

tuskermanshu avatar Sep 14 '23 06:09 tuskermanshu

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

chipcop106 avatar Jan 12 '24 06:01 chipcop106

Any findings for this? im facing the same issue

cheesypeperoni avatar Jun 20 '24 06:06 cheesypeperoni