Webpack with module-federation-plugin

[raymondsugiarto]

Hi everyone,

I want to try implement microfrontend using webpack module federation in my new quasar project.
I try to add module-federation-plugin in quasar.conf.js like below

build: { chainWebpack (chain) { chain .plugin("module-federation-plugin") .use(require("webpack").container.ModuleFederationPlugin, [ { name: 'forum', filename: 'remoteEntry.js', exposes: { './ExampleComponent.vue': './src/components/ExampleComponent.vue', }, shared: { ...deps, vue: { singleton: true } } } ]); } }

when i start using quasar dev everything is fine, but when i open the web http://localhost:8081/, i got the error like below

Uncaught Error: Shared module is not available for eager consumption: webpack/sharing/consume/default/vue/vue?cba4 at __webpack_require__.m.<computed> (app.js:1035:54) at __webpack_require__ (app.js:228:33) at fn (app.js:533:21) at eval (client-entry.js:2:61) at ./.quasar/client-entry.js (app.js:30:1) at __webpack_require__ (app.js:228:33) at app.js:1663:104 at __webpack_require__.O (app.js:272:23) at app.js:1664:53 at app.js:1666:12

I already try to remove shared: vue, its works, but module federation can not loaded.

Please advise, thank you