PrimeVue in Federation Module

[n0inzisch]

Hello when i use any service this works in a normal app. But if i want to split them via federation module i always get the message that a service i not registered.

import ConfirmationService from 'primevue/confirmationservice';
import DialogService from 'primevue/dialogservice';
import FocusTrap from 'primevue/focustrap';
import Ripple from 'primevue/ripple';
import StyleClass from 'primevue/styleclass';
import ToastService from 'primevue/toastservice';
import Tooltip from 'primevue/tooltip';

import PrimeVue from "primevue/config";
...
const app = createApp(App);
app
  .use(pinia)
  .use(DialogService)
  .use(ConfirmationService)
  .use(ToastService)
  .use(PrimeVue, { ripple: true })

Error: No PrimeVue Dialog provided!
at s (usedialog.esm-969b7452.js:1:194)

or

Error: No PrimeVue Confirmation provided!
at a (confirmationeventbus.esm-0b5d6c5d.js:1:186)

i also tried it to put it in the "shared"

here my vite.config.ts
Module:

plugins: [

    vue(),
    federation({
      name: 'client_employee',
      filename: 'employee_remote.js',
      // Modules to expose
      exposes: {
        // "./EmployeeView": "./src/views/EmployeeView.vue",
        // "./EmployeeList": "./src/views/EmployeeList.vue",
        // "./CreateEmployee": "./src/views/CreateEmployee.vue",
        './ModuleConfig': './src/ModuleConfig.vue',
      },
      shared: ['vue', 'pinia', "vue-router", "axios",
      'primevue/config',
      'primevue/toastservice',
      'primevue/dialogservice',
      'primevue/confirmationservice',]
    })
  ],

MainApp:

plugins: [
    vue(),
    federation({
      name: 'k1-main',
      filename: 'empty_remote.js',
      exposes: {
        './ModuleConfig': './src/EmptyModuleConfig.vue',
      },
      remotes: {
        client_employee: {
          external: generateFetch((isDev() ? "http://localhost:8082" : "/employee") + "/assets/employee_remote.js"),
          externalType: 'promise'
        },
      },
      shared: ['vue', 'pinia', "vue-router", "axios",
      'primevue/config',
      'primevue/toastservice',
      'primevue/dialogservice',
      'primevue/confirmationservice',
    ]
    })
  ],

what do i miss?

thank you
Christian

[cagataycivici]

I haven't used PrimeVue in a module federation enabled architecture however the related services are vue plugins so provide/inject functionality seems broken in this case, they are installed per app so not sure how that can play with host and remote apps. It might be useful to also post this to the vite plugin discussions, I've found a similar one that covers components not services;

originjs/vite-plugin-federation#118 (comment)

Hopefully the author of the plugin can provide a pointer or another user here who managed to run federation with PrimeVue.