vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.83k stars 6.96k forks source link

[Feature Request] Vuetify component can't shared using Module Federation #19276

Closed alghifarifikri closed 1 month ago

alghifarifikri commented 8 months ago

Problem to solve

I try to Sharing Component Vuetify with Module Federation

const {
  withNativeFederation,
  shareAll,
} = require("@softarc/native-federation/build");

const deps = require("../package.json").dependencies;

module.exports = withNativeFederation({
  name: "remote-app",
  exposes: {
    "./remote-component": "./src/components/Counter.vue",
    "./Navigation": "./src/components/Navigation.vue",
    "./TextField": "./src/components/Atoms/Input/TextField.vue",
    "./utils-days": "./src/utils/days.ts",
    "./utils/helper": "./src/utils/helpers.js",
    "./vee-validate": "./src/vee-validate.ts",
    "./vuetify": "./src/vuetify.ts",
    // "./custom-element": './src/main.js',
  },
  // skip: ['vuetify'],
  shared: {
    // "@vee-validate/rules": "^4.12.5",
    // "vuetify": "^3.5.4",
    // "vee-validate": "^4.12.5",
    "vuetify": { singleton: true, requiredVersion: deps["vuetify"] },
    ...deps,
    ...shareAll({
      singleton: true,
      strictVersion: true,
      requiredVersion: "auto",
      includeSecondaries: false,
    })
  }
});

but this error happened

Uncaught (in promise) SyntaxError: The requested module 'blob:http://localhost:5001/3e8f6547-4ba7-4957-ba9c-9aa8809570db' does not provide an export named 'getCurrentInstance' (at defaults.mjs?v=54ca0e78:3:10)

if I click, referred to : image

Proposed solution

Vuetify can shared by Module Federation

KaelWD commented 8 months ago

I don't know what you expect me to do about this, getCurrentInstance is exported https://unpkg.com/vuetify@3.5.6/lib/util/index.mjs

alghifarifikri commented 8 months ago

I don't know what you expect me to do about this, getCurrentInstance is exported https://unpkg.com/vuetify@3.5.6/lib/util/index.mjs

The error occurs when I try to share Vuetify components from a remote project to the host project using Module Federation (Vuetify is installed on the remote project). when I use vuetify in a remote project, no errors occur and the components work.