I am using Vue with single-spa and I decided to try to reduce the bundle size. To do this, first I started by trying to set Vue as an external dependency by setting it in webpack.config.js of each Micro Front-end
externals: ['single-spa', 'vue'],
and setting in the root config the following:
<script type="systemjs-importmap">
{
"imports": {
"single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js",
"vue": "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.34/vue.global.min.js"
}
}
</script>
<link rel="preload" href="https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js" as="script"
crossOrigin="anonymous">
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.34/vue.global.min.js" as="script"
crossOrigin="anonymous">
but when I try to load, it crashes with the following:
Uncaught TypeError: application '@workspace/foo' died in status LOADING_SOURCE_CODE: (0 , t.defineComponent) is not a function
at vue-router.esm-bundler.js:2123:38
at main.ts:32:38
at Object.execute (main.ts:32:38)
at doExec (system.js:469:34)
at postOrderExec (system.js:465:12)
at system.js:422:14
and also for another
Uncaught TypeError: application '@workspace/bar' died in status LOADING_SOURCE_CODE: (0 , o.ref) is not a function
at Object.9828 (quasar.esm.prod.jss:6:510)
at s (bootstrapp:19:32)
at 1.jss:3:16
at main.tss:54:28
at Object.execute (main.tss:54:28)
at doExec (system.js:469:34)
at postOrderExec (system.js:465:12)
at system.js:422:14
I really don't know why, but using exactly this made it work
<script type="systemjs-importmap">
{
"imports": {
"single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js",
"vue": "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.29/vue.global.prod.min.js",
"vue-router": "https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.0.12/vue-router.global.prod.min.js",
"vue-i18n": "https://cdnjs.cloudflare.com/ajax/libs/vue-i18n/9.2.0-beta.35/vue-i18n.global.prod.min.js"
}
}
</script>
<link rel="preload" href="https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js" as="script"
crossOrigin="anonymous">
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.29/vue.global.prod.min.js" as="script"
crossOrigin="anonymous">