Vue wrapper doesn't work when I publish to NPM

Stencil
1

Hi, I followed the instructions at VueJS Integration with Stencil | Stencil using a lerna mono repo. I was able to get this working (basic starter stencil component and basic starter vue app).

When I run the ‘my-app’ Vue app within lerna it works fine, I can also publish the ‘my-app’ and it works fine.

My issue is when I publish the stencil component and vue wrapper to NPM and try to use them in a new app I get the following error in the console:

http://localhost:5175/node_modules/.vite/deps/my-component.entry.js?import net::ERR_ABORTED 504.

I am assuming I am missing something in the configuration to publish the components properly, but I have not been successful at figuring it out. The repo of my lerna mono repo is at: GitHub - mfoitzik/StenciljsVueIntegrationDemo.

The published test wrapper component is also available at @mifotest/vue-library.

If anyone could point me in the right direction, I would deeply appreciate it. My whole objective is to publish a component with the vue wrapper (I want to do the other wrappers as well but just started with vue)

2

I am going to answer my own question here because I received help on the Stencil Discord category.

The answer(from Discord user KAROTTE) is:
You have set the enableImportInjection https://stenciljs.com/docs/config-extras#enableimportinjection

So the top part of my stencil.config.js file looks like this:

export const config: Config = {
  namespace: 'stencil-library',
  extras: {
    enableImportInjection: true
  },