import { applyPolyfills, defineCustomElements } is not working in Vue3 + Vite

[akhi-ninja]

Prerequisites

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

Stencil Version

2.11.0

Current Behavior

Created components with stencil 2.11.0 and publish to npm (https://www.npmjs.com/package/bulma-stencil) , when i am trying to import the component in Vue3 application ( built on vite) not working as per this documentation https://stenciljs.com/docs/vue
But its working when load the module in index.html like this <script type='module' src='node_modules/bulma-stencil/dist/bulma-stencil/bulma-stencil.esm.js'></script>
here is the warning from vite console

Expected Behavior

component should load work when we do
import { applyPolyfills, defineCustomElements } from 'bulma-stencil/loader';

Steps to Reproduce

Create a package or use test component which is mentioned in https://stenciljs.com/docs/vue load in vue3 application

Code Reproduction URL

https://github.com/akhi-ninja/bulma-stenciljs

Additional Information

No response

[ionitron-bot]

Thanks for the issue! This issue has been labeled as holiday triage. With the winter holidays quickly approaching, much of the Stencil Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues are properly triaged and that new PRs are reviewed.
In the meantime, please read our Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly.
Thank you!

[rwaskiewicz]

👋 I think there are two items for the team to look at here to be able to close out this issue:

• Stencil needs to be able to work with tools like Vite a little better. There's an open PR that moves us towards that goal (feat(loader): inject import statements that are statically analyzable #2959) that we'll need to continue to pursue
• Documentation - the docs could use some love here, similar to what we did with Angular and React.

I've labeled this issue so it gets ingested into our internal issue tracker and to be sure we tackle both of these items. Thanks again!

[jeco123]

Hi guys,

in case you have not already tried, it works when bootstraping vue3 with vue-cli.

[dgateles]

Awaiting a resolution. Not working with Vite yet.

[rwaskiewicz]

👋 The bug reported in this issue has been fixed with the v2.16.0 release of Stencil. As a result, I'm going to close this issue. If you believe that the bug still exists, please feel free to open a new ticket. Thanks again!

EDIT: This functionality is gated under a new flag, experimentalimportinjection. Folks wishing to make use of the functionality should enable this flag and recompile their Stencil projects.

[zstundys]

Looks like the experimentalImportInjection flag does not work with the vue-output-target guide outlined in the docs :/

Would be nice to include Vite-specific guide in the FAQ section :)

Related discussion on vitejs/vite#3326

[jeco123]

from my side everything is ok. I tried react and vue from vite, and vue via the cli.

[zstundys]

from my side everything is ok. I tried react and vue from vite, and vue via the cli.

Edit: My apologies, it seems that Vite cached an earlier version of the bundled library with experimentalImportInjection turned off. Restarting the vite server fixed the issue.

What's your configuration when loading the stencil components in Vite Vue project? I thought all that's needed was:

// main.ts
import { ComponentLibrary } from "vue-output-target-components";
app.use(ComponentLibrary);

And then using them in .vue files:

<script setup lang="ts">
import { FdsButton } from "vue-output-target-components";

defineComponent({ components: { FdsButton } }); 
</script>

<template>
  <FdsButton>Hello</FdsButton>
</template>

[jeco123]

// main.js
import { createApp } from 'vue'
import App from './App.vue';

createApp(App).mount('#app')

// app.vue
<script setup>
import { FdsButton } from "vue-output-target-components";
</script>

<template>
  <main>
    <FdsButton>Hello</FdsButton>
  </main>
</template>

[thijsw]

I think you also need to setup Vue to recognize the custom elements, like this:

{
  template: {
    compilerOptions: {
      isCustomElement: (tag: string) => tag.startsWith('fds-')
    }
  }
}

See https://www.npmjs.com/package/@vitejs/plugin-vue

[jeco123]

here is my config into stencil.config.ts

    vueOutputTarget({
      componentCorePackage: '@tds/web-components',
      proxiesFile: '../vue/src/proxies.ts',
      includeDefineCustomElements: true,
      componentModels: vueComponentModels,
    }),

[tytusplanck]

For others debugging this issue, this new flag also fixed issues I was having SvelteKit since it also uses Vite.