Unable to configure CLI on Vue 3 to fix warning from web components

[sonicoder86]

Version

4.4.5

Reproduction link

https://github.com/blacksonic/todomvc-vue-composition-api

Environment info

Environment Info:

  System:
    OS: macOS 10.15.5
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
  Binaries:
    Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
    Yarn: Not Found
    npm: 6.13.4 - ~/.nvm/versions/node/v12.16.1/bin/npm
  Browsers:
    Chrome: 83.0.4103.106
    Edge: 83.0.478.54
    Firefox: 76.0.1
    Safari: 13.1.1
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.1.2 
    @vue/babel-preset-app:  4.4.1 
    @vue/babel-preset-jsx:  1.1.2 
    @vue/babel-sugar-functional-vue:  1.1.2 
    @vue/babel-sugar-inject-h:  1.1.2 
    @vue/babel-sugar-v-model:  1.1.2 
    @vue/babel-sugar-v-on:  1.1.2 
    @vue/cli-overlay:  4.4.1 
    @vue/cli-plugin-babel: ^4.4.1 => 4.4.1 
    @vue/cli-plugin-e2e-cypress: ^4.4.1 => 4.4.1 
    @vue/cli-plugin-eslint: ^4.4.1 => 4.4.1 
    @vue/cli-plugin-router:  4.4.1 
    @vue/cli-plugin-unit-mocha: ^4.4.1 => 4.4.1 
    @vue/cli-plugin-vuex:  4.4.1 
    @vue/cli-service: ^4.4.1 => 4.4.1 
    @vue/cli-shared-utils:  4.4.1 
    @vue/compiler-core:  3.0.0-beta.15 
    @vue/compiler-dom:  3.0.0-beta.15 
    @vue/compiler-sfc: ^3.0.0-beta.15 => 3.0.0-beta.15 
    @vue/compiler-ssr:  3.0.0-beta.15 
    @vue/component-compiler-utils:  3.1.2 
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/reactivity:  3.0.0-beta.15 
    @vue/runtime-core:  3.0.0-beta.15 
    @vue/runtime-dom:  3.0.0-beta.15 
    @vue/shared:  3.0.0-beta.15 
    @vue/test-utils: 2.0.0-alpha.3 => 2.0.0-alpha.3 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^6.2.2 => 6.2.2 
    vue: ^3.0.0-beta.15 => 3.0.0-beta.15 
    vue-cli-plugin-vue-next: ^0.1.3 => 0.1.3 
    vue-eslint-parser:  7.0.0 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.9.2 (16.0.0-beta.3)
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.11 => 2.6.11 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^4.0.0-beta.2 => 4.0.0-beta.2 
  npmGlobalPackages:
    @vue/cli: 4.3.1

Steps to reproduce

• Create a webcomponent
• Use it in a Vue component
• Warning starts to popup: [Vue warn]: Failed to resolve component: x-username
  at
  at
• Try to configure Vue SFC compiler with option

// 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)
      }
    })
  }
}

• Unable to reach the config

What is expected?

By modifying the webpack config the warning can be solved, but unable to reach the vue compiler config

What is actually happening?

The warning still remains there

---

Related issue vuejs/core#1414

I've tried using the official Vue CLI documentation for configuring vue-loader, but no success
https://cli.vuejs.org/guide/webpack.html

[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

[spaceemotion]

While the config by @BlackSonic worked somewhat, there was one error I was getting::

"export 'staticRenderFns' was not found in './component.vue?vue&type=template&id=6b62fe10&'

To fix this, just replace the .loader() call with .loader(require.resolve('vue-loader-v16')). This seems to be necessary as we're waiting for v3 to finalize.

vue-cli/packages/@vue/cli-service/lib/config/base.js

Line 135 in 9e5b16b

.loader(require.resolve('vue-loader-v16'))

[zdm]

This is not works for me at all. It compiles project, but noisy messages failed to resolve component still present.
Does somebody know, how to make it work?
I am using the same config as posted above with .loader(require.resolve('vue-loader-v16')).

[bitterloa]

@BlackSonic's solution worked like a charm for me to ignore <ion-icon ...> web component elements. I did not need to modify the loader as @spaceemotion needed to a few months ago -- I'm assuming this is because I have a more updated version of Vue (v3.0.5)?

I did get some errors when initially I copied/pasted @BlackSonic solution--not sure exactly what I changed but the following is working for me:

module.exports = {
  lintOnSave: 'warning',
  outputDir: '../app/assets/javascripts/vue-cli',
  // ---------------------------------------------
  // Below we are modifying the webpack config to properly ignore <ion-icon>
  //      web component elements. This is how it is done in Vue 3
  // Inspiration:
  // https://github.com/vuejs/vue-cli/issues/5610#issuecomment-648998597
  // https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader
  // ---------------------------------------------
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        // modify the options...
        options.compilerOptions = {
          ...(options.compilerOptions || {}),
          isCustomElement: tag => /^ion-/.test(tag)
        }
        return options
      })
  }
}

This is basically the same code as originally posted, with some other options shown only for context. But I think a lot of people are specifically trying to ignore ion-icon or other "ion-" elements so hopefully this can save them some time

[zdm]

You need to write: ``` ... .loader( require.resolve( "vue-loader-v16" ) ) ... ``` until `vue-loader` v16 will be released.