Dynamic Lazily imported component doesn't work in preview

Describe the bug

I’m adding components dynamically based on IntersectionObserver ie when the component is in the browser view. Lazy component will load when necessary the component:

<Lazy
  componentName="./Thing"
  let:intersecting
  let:component
  >
  {#if intersecting}
	  <svelte:component this={component} />
  {/if}
</Lazy>

// the interesting part from <Lazy>
...
 export let componentPath = "";
 const initialize = () => {
      observer = new IntersectionObserver(
          (entries) => {
              entries.forEach(async (_entry) => {
                  entry = _entry;

                  if (_entry.isIntersecting) {
                      component = (await import(`${componentPath}.svelte`)).default; 
                  }
                  intersecting = _entry.isIntersecting;
              });
          },
          { root, rootMargin, threshold }
      );
  };
...

In dev mode all is fine and components loads but not in preview (it loads an HTML instead of the component js). I’m suspecting the path to the component isn’t correct in preview mode. Perhaps it’s a matter of specifying a static path that will work in both dev and preview? Unfortunatly $lib doesn’t work.

Reproduction

import a component via a function that takes the component path as a parameter such as

export async function loadComp(path) {
    return  (await import(`${path}.svelte`)).default;
}

and run it in preview mode.

Logs

No response

System Info

@sveltejs/kit 1.0.0-next.370
@sveltejs/vite-plugin-svelte 1.0.0-next.49
vite 2.9.13
node v18.4.0

Severity

blocking prod usage of SvelteKit

Additional Information

No response

[PlopTheReal]

Ok thanks @f-elix, I had more than one dynamic segment in the path.

[PlopTheReal]

Thanks for the quick feedback. My problem is that I haven’t found a way to make this work in preview. Any recommendation would be greatly appreciated.