I am currently trying to develop a qwik app. I have a component, which returns a button, and a calender which should only be shown and rendered when this button is hovered. When I try to just import the component at the top of the file and render it like this:
{showCalender.value && < Calender />}
Qwik throws an error, saying that it couldnt resolve a file:
Failed to resolve import “../../calender_component_sqbjiybb91y.js”
But this isnt the file which I am trying to import, so I thought it must be, that qwik cant just render a component in the middle of the program after the main component is rendered.
To fix this, I tried to use a async function which looks like this:
const store = useSignal<any>(null);
const loadAndShowComponent = $(async () => {
if (!store.value) {
const module = await import('./calender');
store.value = module.Calender;
}
});
This function is then called when the button is hovered like this:
<button id="calenderView" class="mainEl" onMouseEnter$={async () => {
showCalender.value = true
loadAndShowComponent();
}} onMouseLeave$={() => {showCalender.value = false}}>
</button>
I expected, that this would fix the problem and import and render the component when the button is hovered, but instead it throwed the same error.
What am I missing? Which concept of qwik applies here?