Dynamic component imports doesn't work

[lukasborawski]

Hi. I have this component provider, just for dynamic component imports.

<template>
  <component :is="componentLoader" />
</template>

<script setup lang="ts">
import { defineProps, defineAsyncComponent } from 'vue';

interface Props {
  component: {
    module: string;
    file: string;
  };
}

const props = defineProps<Props>();

const componentLoader = defineAsyncComponent({
  loader: () => import(`./modules/${props.component.module}/components/${props.component.file}`),
  delay: 100,
});
</script>

Initialization looks like that.

<template>
  <component-provider :component="form" />
</template>

<script setup lang="ts">
const form: DynamicComponent = reactive({
   module: 'auth',
   file: 'forms/Main.vue'
})
</script>

But it ends with an error.

Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://localhost:4000/_nuxt/modules/base/components/providers/modules/auth/components/forms/Main.vue?import

And Vue warn.

[Vue warn]: Unhandled error during execution of async component loader 

So as you can see the path is wrong because it adds modules/base/components/providers (which is providers one) at the beginning.

Stack:

• Nuxt 3.0.0-rc.13
• Node 16.14.2 (npm 8.7.0)