Warning when using custom elements

[ais-one]

Describe the bug

There is a warning when using HTML custom elements.

I tried using the following

    app.config.isCustomElement = tag => {
      console.log('tag', tag)
      return tag === 'vaadin-button'
    }

but the warning still appears. Also the isCustomElement function is not called

Reproduction

Steps

git clone https://github.com/ais-one/vite-eg
cd vite-eg
npm i
npx snowpack
npm run serve

System Info

• required vite version: 0.14.4
• required Operating System: Windows
• required Node version: 12.16.3
• Optional:
  • npm/yarn version
  • Installed vue version (from yarn.lock or package-lock.json)
  • Installed @vue/compiler-sfc version

Logs (Optional if provided reproduction)

1. Run vite or vite build with the --debug flag.
2. Provide the error log here.

vite:server server ready in 254ms. +0ms
  vite:hmr ws client connected +0ms
  vite:hmr ws client connected +11ms
  vite:history redirecting / to /index.html +0ms
  vite:history redirecting / to /index.html +4ms
  vite:hmr ws client connected +14ms
  vite:history redirecting / to /index.html +14ms
  vite:rewrite /index.html: rewriting +0ms
  vite:rewrite     "vue" --> "/@modules/vue" +2ms
  vite:hmr         /index.html imports /@modules/vue +13ms
  vite:rewrite     "./App.vue" --> "/App.vue" +2ms
  vite:hmr         /index.html imports /App.vue +1ms
  vite:hmr ws client connected +3ms
  vite:hmr serving hmr client +34ms
  vite:resolve (vue) vue -> node_modules\@vue\runtime-dom\dist\runtime-dom.esm-bundler.js +0ms
  vite:rewrite (skipped) /@hmr +53ms
  vite:rewrite /@modules/vue: rewriting +5ms
  vite:rewrite     "@vue/runtime-core" --> "/@modules/@vue/runtime-core" +5ms
  vite:hmr         /@modules/vue imports /@modules/@vue/runtime-core +27ms
  vite:rewrite     "@vue/runtime-core" --> "/@modules/@vue/runtime-core" +1ms
  vite:hmr         /@modules/vue imports /@modules/@vue/runtime-core +1ms
  vite:rewrite     "@vue/shared" --> "/@modules/@vue/shared" +2ms
  vite:hmr         /@modules/vue imports /@modules/@vue/shared +1ms
  vite:hmr ws client connected +1ms
  vite:sfc C:\Users\user\test\vite-eg\App.vue parsed in 8ms. +0ms
  vite:resolve (vue) @vue/runtime-core -> node_modules\@vue\runtime-core\dist\runtime-core.esm-bundler.js +37ms
  vite:resolve (vue) @vue/shared -> node_modules\@vue\shared\dist\shared.esm-bundler.js +1ms
  vite:rewrite /@modules/@vue/shared: no imports found. +18ms
  vite:rewrite /@modules/@vue/runtime-core: rewriting +4ms
  vite:rewrite     "@vue/reactivity" --> "/@modules/@vue/reactivity" +10ms
  vite:hmr         /@modules/@vue/runtime-core imports /@modules/@vue/reactivity +31ms
  vite:rewrite     "@vue/reactivity" --> "/@modules/@vue/reactivity" +1ms
  vite:hmr         /@modules/@vue/runtime-core imports /@modules/@vue/reactivity +4ms
  vite:rewrite     "@vue/shared" --> "/@modules/@vue/shared" +3ms
  vite:hmr         /@modules/@vue/runtime-core imports /@modules/@vue/shared +0ms
  vite:resolve (web_modules) @vaadin/vaadin-button -> web_modules\@vaadin\vaadin-button.js +23ms
  vite:sfc C:\Users\user\test\vite-eg\App.vue parse cache hit +38ms
  vite:sfc /App.vue template compiled in 17ms. +18ms
  vite:resolve (vue) @vue/reactivity -> node_modules\@vue\reactivity\dist\reactivity.esm-bundler.js +30ms
  vite:rewrite /@modules/@vue/reactivity: rewriting +34ms
  vite:rewrite     "@vue/shared" --> "/@modules/@vue/shared" +1ms
  vite:hmr         /@modules/@vue/reactivity imports /@modules/@vue/shared +41ms
  vite:rewrite /@modules/@vaadin/vaadin-button: no imports found. +12ms
  vite:sfc C:\Users\user\test\vite-eg\App.vue parse cache hit +61ms
  vite:sfc /App.vue style compiled in 59ms +60ms

[yyx990803]

https://github.com/vuejs/rfcs/blob/master/active-rfcs/0009-global-api-change.md#configignoredelements---configiscustomelement

See the note about when pre compiling templates. Use vueCompilerOptions in a vite config file to specify that.

[ais-one]

Thank you...

It works...

added the file vite.config.js with contents below...

module.exports = {
  vueCompilerOptions: {
    isCustomElement: tag => tag.startsWith('vaadin-')
  }
}

[akauppi]

For Vite 2.x, isCustomElement has been moved to the Vue plugin.

plugins: [vue({
    template: {
      compilerOptions: {
        isCustomElement: () => true
      }
    }
  })]

Source: #1312