How to use defineAsyncComponent with Vite and Vue component :is?

Question

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);

"vue": "^3.3.4", "@heroicons/vue": "^1.0.6", "vite": "^5.2.12",

Estus Flask · Accepted Answer · 2024-06-04 22:45:07Z

defineAsyncComponent supports both a function that returns a promise of a component and a promise of module object as an argument, but only for ES modules.

The problem is specific to the package. @heroicons/[email protected] provides CommonJS modules for each component like @heroicons/vue/solid/StarIcon. They can be imported as default ESM import with module interop but may not satisfy the requirements in defineAsyncComponent, as this depends on a way the bundler implements it.

So (await import("@heroicons/vue/solid/StarIcon")).default is a workaround will work with both CJS and ES modules and can be generally recommended for such cases.

I get it. but if you pull out the StarIcon file and put it next to it and try to import it, it works as it should (just like with vue-cli).
Can you clarify what does your code look like in this case it's working?

Collectives™ on Stack Overflow

How to use defineAsyncComponent with Vite and Vue component :is?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related