ES6 named imports in defineAsyncComponent

user_7510971 0
Viewed 220

I'd like to async load some elements of my web app:

This is the old import:

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

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

Now I would like to do this:

import {defineAsyncComponent} from "vue";

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

Any idea how I could solve this?

vuejs3 vue.js javascript
1 Answers

Static import is a statement and isn't supposed to be used anywhere but at the top of a module. Dynamic import() is an expression and follows JavaScript syntax that is used in expressions.

import() returns a promise of module exports. It should be:

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

Tree shaking is disabled for dynamically imported module and needs to be annotated for a bundler, e.g. Webpack.

user_37315010
Related