Unable get rid of web component warning #1414

sonicoder86 · 2020-06-21T11:21:35Z

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 · 2020-06-21T11:52:44Z

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 · 2020-06-22T05:20:45Z

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 · 2020-06-22T06:15:09Z

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

underfin · 2020-06-22T06:36:07Z

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 · 2020-06-22T07:38:20Z

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

LinusBorg · 2020-06-22T07:42:02Z

@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 · 2020-06-22T07:48:52Z

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 · 2020-06-22T18:54:43Z

@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 · 2020-06-22T19:01:27Z

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 · 2020-06-22T20:42:41Z

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

sonicoder86 · 2020-06-24T18:44:07Z

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

soultice · 2020-09-17T09:50:37Z

This seems to break now that vue-cli isn't using vue-cli-plugin-vue-next anymore.
I'm getting

Module Error (from ./node_modules/vue-loader/lib/index.js):
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.

When removing the vue-loader rule the app will compile but the warnings show up again.
My uneducated guess is that setting the compilerOptions will force vue-loader to use vue-template-compiler?
Any idea how to fix this?

EDIT: installing the beta version of vue-loader fixed that for me as well

ddramone · 2020-11-17T17:04:02Z

I'm still getting the error when using custom webpack build

Failed to resolve component: xyz

Versions:

"vue": "^3.0.2",
"vue-loader": "^16.0.0-rc.1"

Webpack:

{
...
rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          compilerOptions: {
            isCustomElement: tag => /^xyz/.test(tag),
          },
        },
      },
     ...
],
...
plugins: [
    new VueLoaderPlugin(),
    ...
]
}

fengdu555 · 2021-02-04T15:32:12Z

需要安装vue-loader@next和vue-template-compiler能行

blabbath · 2021-04-29T11:38:59Z

@vuesomedev worked for me, hoewever I had to get rid off one line, otherwise vue-cli wouldn't compile:

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

"vue": "^3.0.0",
"vue-loader": "^15.9.6"
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",

jfbrennan · 2021-06-03T19:36:14Z

Thanks to everyone else who has shared.
This is what worked for me (i.e. I'm building with mode=development and expect the warnings about custom elements to go away, and they finally did):

// package.json
{
  "name": "...",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "vue-cli-service build",
    "build:dev": "vue-cli-service build --mode development --dest ../server/public --no-clean --watch",
    ...
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.11",
    "@vue/test-utils": "^2.0.0-0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "lint-staged": "^9.5.0",
    "typescript": "~3.9.3",
    "vue-jest": "^5.0.0-0",
    "vue-loader": "^16.2.0"
  },
  ...
}


// vue.config.js
module.exports = {
  ...
  chainWebpack: config => {
    // Ignore custom HTML tags/Custom Elements
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions = {
          ...(options.compilerOptions || {}),
          isCustomElement: tag => /^(m|octo)-/i.test(tag)
        };
        return options;
      });
  }
}

I love Vue, but I really wish the Vue folks would unburden the project by making SFC the default and therefore make the build process that much easier.

einavk · 2021-10-04T08:23:43Z

Hi,
I am using the suggested setup, like @jfbrennan , and when running the application on dev env using "vue-cli-service serve" I do not get the warnings. However, on production, I see the warnings in the console. I assumed these are build-time created warnings, and I am using the vue-cli-service for build with the same set up. So what could I be missing?

chaderenyore · 2022-02-23T21:49:03Z

@vuesomedev What about solution for Vite.config.js

blabbath · 2022-02-24T07:39:18Z

For vite this worked for me:

// vite.config.js
import vue from "@vitejs/plugin-vue";

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith("cds-"),
        },
      },
    }),
  ],
};

hijpax · 2022-02-25T19:27:30Z

@blabbath can you explain how you import your components? Please.
I've tried your solution... it isnt work.

typescript: ^4.5.4
vite: ^2.8.0
vue: ^3.2.25

allenhwkim · 2022-05-05T17:19:50Z

webpack4 webpack.config.js. ref. https://v4.webpack.js.org/concepts/loaders/
For webpack5, ref. https://webpack.js.org/concepts/loaders/

{
  ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [{
          loader: 'vue-loader',
          options: {
            compilerOptions: {
              isCustomElement: tag => /^s-/.test(tag)
            }
          }
        }]
      },
      ...
  },
  plugins: [
    new VueLoaderPlugin(),
    ...
  ]
}

LinusBorg added the 🐞 bug Something isn't working label Jun 21, 2020

LinusBorg removed the 🐞 bug Something isn't working label Jun 22, 2020

yyx990803 closed this as completed Jun 22, 2020

This was referenced Jun 23, 2020

Unable get rid of web component warning vuejs/vue-cli-plugin-vue-next#36

Closed

Unable to configure CLI on Vue 3 to fix warning from web components vuejs/vue-cli#5610

Closed

xmsz mentioned this issue Jul 25, 2020

支持isCustomElement属性 vuejs/babel-plugin-jsx#43

Closed

beetaa mentioned this issue Aug 15, 2020

web components [Vue warn]: Failed to resolve component: xy-button" #1221

Closed

janivo mentioned this issue Nov 20, 2020

Migrate elements-example-vue from Vue v2 to v3 inovex/elements#200

Closed

wlee221 mentioned this issue Dec 4, 2020

Vue 3.x - export 'config' was not found in 'vue' aws-amplify/amplify-js#6756

Closed

bailicangdu mentioned this issue Oct 19, 2021

Failed to resolve component: micro-app jd-opensource/micro-app#64

Closed

github-actions bot locked and limited conversation to collaborators Sep 28, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unable get rid of web component warning #1414

Unable get rid of web component warning #1414

sonicoder86 commented Jun 21, 2020

LinusBorg commented Jun 21, 2020

underfin commented Jun 22, 2020

sonicoder86 commented Jun 22, 2020

underfin commented Jun 22, 2020

LinusBorg commented Jun 22, 2020

LinusBorg commented Jun 22, 2020 •

edited

Loading

underfin commented Jun 22, 2020 •

edited

Loading

sonicoder86 commented Jun 22, 2020

sonicoder86 commented Jun 22, 2020 •

edited

Loading

yyx990803 commented Jun 22, 2020

sonicoder86 commented Jun 24, 2020

soultice commented Sep 17, 2020 •

edited

Loading

ddramone commented Nov 17, 2020 •

edited

Loading

fengdu555 commented Feb 4, 2021

blabbath commented Apr 29, 2021

jfbrennan commented Jun 3, 2021 •

edited

Loading

einavk commented Oct 4, 2021

chaderenyore commented Feb 23, 2022

blabbath commented Feb 24, 2022

hijpax commented Feb 25, 2022

allenhwkim commented May 5, 2022 •

edited

Loading

Unable get rid of web component warning #1414

Unable get rid of web component warning #1414

Comments

sonicoder86 commented Jun 21, 2020

Version

Reproduction link

Steps to reproduce

What is expected?

What is actually happening?

LinusBorg commented Jun 21, 2020

underfin commented Jun 22, 2020

sonicoder86 commented Jun 22, 2020

underfin commented Jun 22, 2020

LinusBorg commented Jun 22, 2020

LinusBorg commented Jun 22, 2020 • edited Loading

underfin commented Jun 22, 2020 • edited Loading

sonicoder86 commented Jun 22, 2020

sonicoder86 commented Jun 22, 2020 • edited Loading

yyx990803 commented Jun 22, 2020

sonicoder86 commented Jun 24, 2020

soultice commented Sep 17, 2020 • edited Loading

ddramone commented Nov 17, 2020 • edited Loading

fengdu555 commented Feb 4, 2021

blabbath commented Apr 29, 2021

jfbrennan commented Jun 3, 2021 • edited Loading

einavk commented Oct 4, 2021

chaderenyore commented Feb 23, 2022

blabbath commented Feb 24, 2022

hijpax commented Feb 25, 2022

allenhwkim commented May 5, 2022 • edited Loading

LinusBorg commented Jun 22, 2020 •

edited

Loading

underfin commented Jun 22, 2020 •

edited

Loading

sonicoder86 commented Jun 22, 2020 •

edited

Loading

soultice commented Sep 17, 2020 •

edited

Loading

ddramone commented Nov 17, 2020 •

edited

Loading

jfbrennan commented Jun 3, 2021 •

edited

Loading

allenhwkim commented May 5, 2022 •

edited

Loading