Блог

Я хотел бы асинхронно загрузить некоторые элементы моего веб-приложения:

Это старый импорт:

 import {Popover, PopoverButton, PopoverPanel} from '@headlessui/vue'

export default {
    components: {
        Popover,
        PopoverButton,
        PopoverPanel,
    },
...
 

Теперь я хотел бы сделать это:

 import {defineAsyncComponent} from "vue";

export default {
    components: {
        Popover: defineAsyncComponent(() =>
            import( {Popover} from "@headlessui/vue" ) // This does not work as I get the error " ')' expected"
        ),
        ...
    },
...
 

Есть идеи, как я мог бы это решить?

Статика import -это утверждение, и его не следует использовать нигде, кроме как в верхней части модуля. Dynamic import() -это выражение, которое следует синтаксису JavaScript, используемому в выражениях.

import() возвращает обещание экспорта модулей. Это должно быть:

 Popover: defineAsyncComponent(async () => {
 return (await import("@headlessui/vue")).Popover;
})
 

Встряхивание дерева отключено для динамически импортируемого модуля и должно быть аннотировано для пакета, например Webpack.