bug: vue-component-library not usable in a vue3-vite example application => Failed to fetch dynamically imported module

[verena-ifx]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

3.0.0

Stencil Framework Output Target

Vue

Stencil Framework Output Target Version

0.8.6

Current Behavior

I can build my component library for vue without issues and have a similar setup as here Ionic example project

Once I deploy my vue-library to npm and try to use it in an example application, I get the following errors: Failed to fetch dynamically imported module: my-component I get this for all my components. In the dist folder on gh-pages I have the following output

However, when I build my package locally and create an npm-link to my example application, the dist folder contains all these modules that are failing to be imported when I deploy (e.g. my-component.entry.js)

My deployment process looks like this:

npm install
npm install @my-company/my-repo@"$CANARY_VERSION"
npm version $CANARY_VERSION --no-git-tag-version --force
npm run build
npm publish --tag canary

Expected Behavior

For React, I have no issues. The only thing I had to add into my example application if I wanted to build it, was the following to the build command "build": "PUBLIC_URL=. react-scripts build",

But the rest worked out of the box as I would expect it for the Vue integration as well

Steps to Reproduce

Stencil project Vue integration following this guideline: https://stenciljs.com/docs/vue Example application consuming the Vue library once it has been deployed

Code Reproduction URL

https://github.com/Infineon/infineon-design-system-stencil/pull/272

Additional Information

No response

[verena-ifx]

So I just noticed that this seems to be related to Vite, because when I use the react-library in a react-typescript project with vite as a builder, I get the exact same error about the "failure to load dynamically imported modules". But since for Vue, it is now recommended to Vite, we cannot simply switch to using Webpack etc.

[verena-ifx]

Update: I tried this https://stenciljs.com/docs/v3/config-extras#enableimportinjection but I still get the same result with Vite..

[nicoroessel]

I encountered the same issue. Any update and/or workaround?

[rwaskiewicz]

@verena-ifx Did @tanner-reits' comment/your additional tests solve this issue? Or is this something else entirely?

[felipefialho]

Hi @nicoroessel and @verena-ifx I've been dealing with this problem for some time here, it's quite intermittent, happening to a few users a day and I simply can't simulate it. I also have enableImportInjection: true

Were you able to make progress on this issue?