loading vue3 js library via importmap crashes during load

[adq]

Describe the bug or question
If I build a vue3 micro frontend with embedded vue3 library it works. If I change webpack config to

config.externals(['vue'])

Using this as the vue3 library in the importmap:

    "vue": "https://cdn.jsdelivr.net/npm/vue@3.0.5/dist/vue.global.js",

Then I get the following javascript error at runtime when single-spa tries to load the vue3 micro frontend:

    at eval (App.vue?3dfd:3)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader-v16/dist/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/App.vue?vue&type=template&id=7ba5bd90 (app.js:904)
    at __webpack_require__ (app.js:800)
    at fn (app.js:111)
    at eval (App.vue?4907:1)
    at Module../src/App.vue?vue&type=template&id=7ba5bd90 (app.js:2372)
    at __webpack_require__ (app.js:800)
    at fn (app.js:111)
    at eval (App.vue?dfb6:1)
    at Module../src/App.vue (app.js:2348)

This appears to be from the guts of webpack, which I do not yet know.
I assume vue.global.js is the file to use for vue 3; I tried all the others and they appear to work even less.

In summary:
vue2 works fine
vue3 built into the micro frontend app works fine (ie not via importmap).
vue3 as external library loaded via importmap breaks as above.

I'm using:
vue: 3.0.5
single-spa: 5.9.1
I am not using single-spa-layout
I created the vue micro frontend + root-config from scratch app using your own tooling (after I figured out this other bug: https://github.com/single-spa/single-spa-vue/issues/71).

I can supply an example if that would help.

[adq]

This is weird, I have been doing some investigation:

If I set vue to be compiled into my ufrontend (ie omit it from webpack externals), and change my App.vue to this:

import { h, createApp } from 'vue';
import singleSpaVue from 'single-spa-vue';

console.log('h-- ' + h);
console.log('createApp--' + createApp);

const vueLifecycles = singleSpaVue({
  createApp,
  appOptions: {
    render() {},
  },
});

export const bootstrap = vueLifecycles.bootstrap;
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;

Then I see the following in the console:

h-- function h(type, propsOrChildren, children) { [snip]
createApp--(...args) => { [snip]

and things work ok (although my GUI isn't rendered obviously)

If I change vue to be a webpack external, then I see this in the console:

You are running a development build of Vue.
Make sure to use the production build (*.prod.js) when deploying for production.
h-- undefined
createApp--undefined
app-errors.js:12 Uncaught Error: application '@tvsquared/tvs-spapoc-nav' died in status LOADING_SOURCE_CODE: single-spa-vue must be passed opts.Vue or opts.createApp
    at u (single-spa-vue.js?07ab:1)
    at eval (main.js?56d7:9)
    at Module../src/main.js (app.js:2324)
    at __webpack_require__ (app.js:800)
    at fn (app.js:111)
    at Object.1 (app.js:2338)
    at __webpack_require__ (app.js:800)
    at app.js:867
    at Object.<anonymous> (app.js:870)
    at Object.execute (amd.js:56)

ie in that mode, h and createApp are undefined!

I can see its loading the vue.global.js ok (log in console and checked in network tab)

So, with vue3 as an external, webpack or something is not returning resolved vue exports properly?

[joeldenning]

This is a duplicate of #672 and is explained in detail in systemjs/systemjs#2272. See systemjs/systemjs#2272 (comment) for the best way to load Vue 3 as a systemjs module.

[adq]

Thanks!

However, I found another related issue so I created a ticket in systemjs for it: systemjs/systemjs#2300
(linking from here for context)