Dynamic import via variables

[T0miii]

We get an error when we try to import a remote module name via variable.

const name = 'app/Counter'

const remoteComponent = defineAsyncComponent({
  loader: () => import(/* @vite-ignore */ name),
  loadingComponent: () => '<div>Loading...</div>',
  errorComponent: () => '<div>Error!</div>',
  delay: 200,
  timeout: 3000,
})

Error is something like this:

Did anyone manage to import Module Dynamically?

[T0miii]

@Dorkside Hello, and also sorry for this summoning, but as i can see you are also working with module federation so maybe you have an idea or we can have a discassion about this problem/chalange i encountered.

As I imagine static module federation imports are going to be rare case for us, as the module informations are comming from the API.

So as above described the problem with dynamic import with variables is that, vite trys to resolve the path.
Do you have any experience with this?

[Dorkside]

Sorry no experience with this pattern.
What is the usecase for having such higly dynamic modules ?

[T0miii]

Its a Dashboard/Widget System , where developers from different departments can register their App/Widget. We fetch those from the backend and run trough them, load the component by its name: widget.remoteName . Once there was a talk about dynamic imports in some issue, but i think it got abounded, or no time yet to implement. Thanks anyway.