vue.js - Vue3 / vite External Component

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

等待大神答复