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-/];

[LinusBorg]

Not 100% yet, but I think we have to extend idNativeTag to check against app.context.isCustomElement.

https://github.com/vuejs/vue-next/blob/e4dc03a8b17d5e9f167de6a62a645878ac7ef3e2/packages/runtime-dom/src/index.ts#L99-L106

It seems to me that we only use it in the compiler so far, so any custom element declared in a render function (or compiled during build) will resolve in a failure here.

[underfin]

You can add the blew config into vite.config.js.Because your template will compiled by sfc compiler.

vueCompilerOptions: {
    isCustomElement: tag => {
      return /^x-/.test(tag)
    }
  }

Other the app.config.isCustomElement = tag => /^x-/.test(tag); only work with runtime-dom compiler.

[sonicoder86]

@underfin how can I add the same to Vue CLI?

[underfin]

You can add this into webpack config.It should work (I'm not test it).

{
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          compilerOptions: {
    isCustomElement: tag => {
      return /^x-/.test(tag)
    }
  }
        }

[LinusBorg]

Oh so we really only check during compile time? My mistake then.

[LinusBorg]

@BlackSonic for vue-cli you would have to do something like this:

// 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 => {
      option.compilerOptions = {
         ...(options.compilerOptions || {}), // merge existing compilerOptions, if any
         isCustomElement: tag => /^x-/.test(tag)
      }
    })
  }
}

[underfin]

Oh so we really only check during compile time? My mistake then.

Look it is for now and this will not generate code for customer component import and don't check it with runtime.

[sonicoder86]

@LinusBorg
What can I do if the tap function doesn't exist?
The webpack-chain packages documentation seems to call use before calling tap.

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

[sonicoder86]

I've tried this

config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions = {
          ...(options.compilerOptions || {}), // merge existing compilerOptions, if any
          isCustomElement: tag => /^e-/.test(tag)
        }
      });

but now it seems that it tries to compile components with vue-template-compiler.

Vue packages version mismatch:

- vue@3.0.0-beta.15 (/Users/esysuser/workspace/vue-example-client/node_modules/vue/index.js)
- vue-template-compiler@2.6.11 (/Users/esysuser/workspace/vue-example-client/node_modules/vue-template-compiler/package.json)

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined

[yyx990803]

As pointed out, Vue 3 requires configuring custom elements via compiler options if pre-compiling templates.

This seems to be now a Vue CLI specific configuration problem so I'm closing it. But feel free to continue the discussion.

/cc @sodatea