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 https://github.com/vuejs/vue-next/issues/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?