Vue.js 3 project use third party custom web component (carcutter-web-player) gives undefined error but works in Angular app
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.
The carcutter development team reached out to me with the solution. They just finished development of a specific vue.js version:
This one works as expected!
They also have other specific versions and a standalone web-component implementation.