Vue.js 3 project use third party custom web component (carcutter-web-player) gives undefined error but works in Angular app

Question

I try to integrate a third party custom web component into a vue/cli projects vue component.

The custom web component integration works inside a standard HTML page and works also inside an Angular project with CUSTOM_ELEMENTS_SCHEMA enabled. Just in Vue.js projects it does not work and gives errors in developer console. I am trying to use it inside a vue/cli project but also setup a new test vue/vite project with the same result.

I import the third party Javascript via a script tag in index.html. To the custom web component element I add

v-pre

to exclude it from Vue's processing. In the vue/vite test project this is done inside vite.config.js.

Here is a the error message and a screenshot of the error position in bundle.js:

> bundle.min.js:3 Uncaught TypeError: Cannot set properties of undefined
> (setting 'borderRadius')
>     at T._applyAttributes (bundle.min.js:3:11650)
>     at T.init (bundle.min.js:3:7009)
>     at T.connectedCallback (bundle.min.js:3:7149)
>     at insert (runtime-dom.esm-bundler.js:16:1)
>     at mountElement (runtime-core.esm-bundler.js:5545:1)
>     at processElement (runtime-core.esm-bundler.js:5455:1)
>     at patch (runtime-core.esm-bundler.js:5323:1)
>     at mountChildren (runtime-core.esm-bundler.js:5583:1)
>     at processFragment (runtime-core.esm-bundler.js:5797:1)
>     at patch (runtime-core.esm-bundler.js:5309:1)

As I said that kind of integration works natively and with Angular. Just Vue refuses to work.

Wondering whats happening here! It really lacks surface to start debugging that issue.

A workable demo would really help, it literally lacks surface for debugging without it — Estus Flask
– Estus Flask, Commented Aug 16, 2024 at 8:57

Torsten Barthel · Accepted Answer · 2024-11-06 18:48:35Z

0

The carcutter development team reached out to me with the solution. They just finished development of a specific vue.js version:

carcutter webplay vue.js

This one works as expected!

They also have other specific versions and a standalone web-component implementation.

edited Nov 6, 2024 at 18:48

answered Oct 9, 2024 at 3:48

Torsten Barthel

3,5431 gold badge29 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js 3 project use third party custom web component (carcutter-web-player) gives undefined error but works in Angular app

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related