Me gustaría cargar asíncronamente algunos elementos de mi aplicación web:
Esta es la importación anterior:
import {Popover, PopoverButton, PopoverPanel} from '@headlessui/vue' export default { components: { Popover, PopoverButton, PopoverPanel, }, ...Ahora me gustaría hacer esto:
import {defineAsyncComponent} from "vue"; export default { components: { Popover: defineAsyncComponent(() => import( {Popover} from "@headlessui/vue" ) // This does not work as I get the error " ')' expected" ), ... }, ...¿Alguna idea de cómo podría resolver esto?
La import estática es una declaración y se supone que no debe usarse en ningún otro lugar que no sea en la parte superior de un módulo. Dynamic import() es una expresión y sigue la sintaxis de JavaScript que se usa en las expresiones.
import() devuelve una promesa de exportaciones de módulos. Debería ser:
Popover: defineAsyncComponent(async () => { return (await import("@headlessui/vue")).Popover; })El movimiento del árbol está deshabilitado para el módulo importado dinámicamente y debe anotarse para un paquete, por ejemplo, Webpack .