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?
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.