TypeError: Failed to fetch dynamically imported module (vue)

[sneas]

Hi folks,

I'm trying to figure out why my component is working in "regular" Vue setup, but isn't working with ViteJS. The component is a web component created with StencilJS + Vue bindings provided by Stencil. Here are working and non-working example repositories:

Working example

https://github.com/sneas/img-comparison-slider-vue-example/blob/main/src/App.vue

Non-working example

https://github.com/sneas/img-comparison-slider-vitejs-example/blob/main/src/App.vue

Both examples look quite similar, but the ViteJS example is throwing an error:

GET http://localhost:3000/node_modules/.vite/img-comparison-slider.entry.js net::ERR_ABORTED 404 (Not Found)
TypeError: Failed to fetch dynamically imported module: http://localhost:3000/node_modules/.vite/img-comparison-slider.entry.js undefined

The Vue component's code isn't very spectacular, though. Because it gets generated and published by CI.

Does anyone know how to fix it?

[hunteryun]

same error, my issue is after build, and I use

const dynamicComponent = setAsyncComponent("SOME_COPONENT");

[sneas]

Perhaps, you don't have all the necessary files for the dynamic component.

In my situation, the final solution could be distilled to sneas/img-comparison-slider@5d20151#diff-324ce2ad3c84462f49ebbf6f4ff14070b46bf6a017098364ec5b774e8829502cR34-R36

But I wasn't working on the Vue app per se. I was working on the component which is used by other Vue apps. So the solution might not fit your need if you're working on the app, but not on the component.

[simaomeyrer]

I had the same problem in production mode in my Vue + Vite project which uses my Stencil library, researching a few hours for a resolution, the enableImportInjection of Stencil config was the answer.
In this topic, comes clearly that Stencil needs this flag to work with lazy loaded components with Vite, hope this help you too.