Unable get rid of web component warning

[sonicoder86]

Version
3.0.0-beta.15

Reproduction link
https://github.com/blacksonic/vue-3-playground

Steps to reproduce
Create a webcomponent with the name x-username
Modify the app instance config to test for webcomponents
Include the webcomponent in a vue template
Config of the application
app.config.isCustomElement = tag => /^x-/.test(tag);
What is expected?
The application shouldn't log warning as it is configured to treat the element as a webcomponent

What is actually happening?
Vue logs warning:
[Vue warn]: Failed to resolve component: x-username

The component is displayed however

I wanted to find a replacement from Vue 2 ignoredElements
Vue.config.ignoredElements = [/^x-/];

I've tried modifying the vue cli webpack plugin options but with no luck

// vue.config.js
module.exports = {
  chainWebpack: config => {
   // get the existing vue-loader rule and tap into its options
    config.module.rule('vue-loader').tap(options => {
      options.compilerOptions = {
         ...(options.compilerOptions || {}), // merge existing compilerOptions, if any
         isCustomElement: tag => /^x-/.test(tag)
      }
    })
  }
}

I get this message:
(node:10740) UnhandledPromiseRejectionWarning: TypeError: config.module.rule(...).tap is not a function

[sonicoder86]

Related issue vuejs/core#1414

[sonicoder86]

I've found the fix.

The Vue CLI config is:

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions = {
          ...(options.compilerOptions || {}),
          isCustomElement: tag => /^x-/.test(tag)
        };
        return options;
      });
  }
};

And in addition, I needed to install the beta version of vue-loader

[chaderenyore]

@vuesomedev you have any solution for vite?