Vue3 / vite External Component - vue.js

Question

Seems like i'm stuck with my problems with loading a external umd component in vue.
I try to do something similar as
Vue 3 external component/plugin loading in runtime
This works for me using vue2 and webpack
Now I'm using Vue3/Vite and also the same source as in the Question above.
But when resolving the external component promise i get the following error when :
vue.js:1184 [Vue warn]: Unhandled error during execution of async component loader
at <AsyncComponentWrapper>
at <DemoComponent>
at <HelloWorld msg="Hello Vue 3.0 + Vite" >
at <App>
warn # vue.js:1184
logError # vue.js:1357
handleError # vue.js:1349
onError # vue.js:4637
(anonymous) # vue.js:4677
Promise.catch (async)
setup # vue.js:4676
callWithErrorHandling # vue.js:1300
setupStatefulComponent # vue.js:7561
setupComponent # vue.js:7522
mountComponent # vue.js:5264
processComponent # vue.js:5240
patch # vue.js:4861
mountChildren # vue.js:5043
processFragment # vue.js:5203
patch # vue.js:4854
componentEffect # vue.js:5357
reactiveEffect # vue.js:339
effect # vue.js:314
setupRenderEffect # vue.js:5322
mountComponent # vue.js:5280
processComponent # vue.js:5240
patch # vue.js:4861
mountChildren # vue.js:5043
processFragment # vue.js:5203
patch # vue.js:4854
componentEffect # vue.js:5357
reactiveEffect # vue.js:339
effect # vue.js:314
setupRenderEffect # vue.js:5322
mountComponent # vue.js:5280
processComponent # vue.js:5240
patch # vue.js:4861
mountChildren # vue.js:5043
processFragment # vue.js:5203
patch # vue.js:4854
componentEffect # vue.js:5357
reactiveEffect # vue.js:339
effect # vue.js:314
setupRenderEffect # vue.js:5322
mountComponent # vue.js:5280
processComponent # vue.js:5240
patch # vue.js:4861
render # vue.js:5937
mount # vue.js:4168
app.mount # vue.js:9324
(anonymous) # main.js:7
Show 16 more frames
external-component.js:11 Uncaught (in promise) TypeError: Chaining cycle detected for promise #<Promise>
at <anonymous>
at HTMLScriptElement.<anonymous> (external-component.js:11)
this is the Code for the promise
export default async function externalComponent(url) {
const name = url.split(`/`).reverse()[0].match(/^(.*?)\.umd/)[1];
if (window[name]) return window[name];
console.log('run');
window[name] = new Promise((resolve, reject) => {
script.async = true;
script.addEventListener(`load`, () => {
resolve(window[name]);
});
script.addEventListener(`error`, () => {
reject(new Error(`Error loading ${url}`));
});
script.src = url;
document.head.appendChild(script);
});
return window[name];
}
and use this in my DemoComponent:
<script lang="ts">
import externalComponent from '../external-component';
import { defineAsyncComponent } from 'vue'
const asyncComponent = defineAsyncComponent(
() => externalComponent(`http://localhost:8200/MyComponent/MyComponent.umd.min.js`)
)
export default {
name: 'DemoComponent',
components: {
MyComponent:asyncComponent
},
....
Can somebody help me with this?

Answer 1

update:
If import vue from vue/dist/vue.esm-bundler and set to global, then no need to change Vite config, and no need to load vue from cdn.
import * as Vue from 'vue/dist/vue.esm-bundler';
window.Vue = Vue;
After trying the link above, I had gotten the vue warn invalid vnode type symbol(static) (symbol) error.
By adding the following config in Vite.config.js, it works for me.
// vite.config.js
import { viteExternalsPlugin } from 'vite-plugin-externals'
export default {
plugins: [
viteExternalsPlugin({
vue: 'Vue'
}),
]
}
https://github.com/crcong/vite-plugin-externals