vue.jssystemjssingle-spa

single-spa set Vue as an external: defineComponent is not a function


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

Solution

  • 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">