How to Solve the Micro Frontend Compatibility Issue with Quasar #17069
Unanswered
sofija-Gjorgs
asked this question in
General - Components / Directives / etc
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I want to create host vue 3 application which will use components and modules from quasar microfrontent application using module federation, and i tried two options:
and here is my vue.config.js
const { defineConfig } = require('@vue/cli-service'); const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin"); module.exports = defineConfig({ transpileDependencies: ['quasar'], pluginOptions: { quasar: { importStrategy: 'kebab', rtlSupport: false, }, }, publicPath:'auto', configureWebpack: { entry: { sideNav: './src/components/SideNav.vue', }, output: { filename: '[name].js', libraryExport: 'default', environment: { arrowFunction: true } }, optimization: { splitChunks: false, }, plugins: [ new ModuleFederationPlugin({ name: "vue3_quasar_sidenav", filename: "remoteEntry.js", library: { type: "var", name:"vue3_quasar_sidenav"}, remotes: { }, exposes: { './SideNav': './src/components/SideNav.vue', }, shared: require("./package.json").dependencies }), ], devServer: { server: { type: 'http' }, port: 8083, open: true // opens browser window automatically }, }, productionSourceMap: false, });
2..using quasar.config.js with vue application created with quasar-cli when I am running the host application getting this error:
I am getting this error, although the script is not missing, it is exposed and loaded in the network and sources tab in DevTools.
and the quasar.config.js file:
` module.exports = configure(function (ctx) {
return {
// https://v2.quasar.dev/quasar-cli-webpack/supporting-ts
supportTS: false,
....`
Anyone has suggestions how to solve this?
Beta Was this translation helpful? Give feedback.
All reactions