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

[blacksonic]

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

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

[blacksonic]

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.

https://github.com/vuejs/vue-cli/blob/9e5b16b00140ef62fa26abd5ff938b7cd8380192/packages/%40vue/cli-service/lib/config/base.js#L135