Nested Async Components - Shouldn't this work?

[Deji69]

I'm trying to build a structure based on incoming data, the back end telling the front how to build the page using pre-made components, but I can't figure out any way to add dynamically imported components as children of another... I've made a minimal example of the issue. No matter whether I do loadComponent('TestB') or createNode('TestB'), it results in the same error (shown below).

// App.vue
<script setup lang="ts">
import { h, VNode, defineAsyncComponent } from 'vue';

async function createNode(c: string): Promise<VNode> {
    const type = await import (`./components/dynamic/${c}.vue`);
    let loadChild: any = null;
    if (c === 'TestA') loadChild = () => loadComponent('TestB');
    return h(type.default, null, loadChild);
}

const loadComponent = (c: string) => defineAsyncComponent(() => createNode(c));

const comp = loadComponent('TestA');
</script>
<template>
    <!-- root component-->
    <component :is="comp" />
</template>

// ./components/dynamic/TestA.vue
<template>
    <b>Test A</b>
    <b><slot>Fallback</slot></b>
</template>

// ./components/dynamic/TestB.vue
<template>
    Test B
</template>

The error I get...

main.ts:13 [Vue warn]: Invalid VNode type: undefined (undefined) 
  at <TestA> 
  at <AsyncComponentWrapper> 
  at <App>

And output is:

<b>Test A</b>
<b></b>

TestB doesn't get inserted, nor do we get the "Fallback". Clearly it recognises and tries to add TestB, but only prints the warning above.

[Deji69]

return h(type.default, null, () => h(loadComponent('TestB')));

Using h to wrap the result of loadComponent was the main key to fixing this.