Could someone explain to me how to use defineAsyncComponent with vite component :is? I’m migrating from vue-cli to Vite and have uncountered an issue where component imported via defineAsyncComponent are not rendering in the layout

For example here is my code:

<template>
  <component :is="icon.icon" />
</template>

<script setup>
import { computed, defineAsyncComponent } from "vue";

const ICONS = {
  star: {
    icon: defineAsyncComponent(() => import("@heroicons/vue/solid/StarIcon"));
  }
};
 
const icon = computed(() => ICONS.star);
</script>

Problem is that the result of the import() in vue-cli is as esmodule with a default getter, but in Vite, it is an object with a default property

To make it work I did this, but I feel like I’m doing something wrong.

defineAsyncComponent(async () => (await import("@heroicons/vue/solid/StarIcon")).default);