bug: vue-output-target 0.8.5 does not work in latest vue app

[mehrabix]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

3.0.0

Stencil Framework Output Target

Stencil Framework Output Target Version

0.8.5

Current Behavior

i used vue 3.3.2 with vite to use stenciljs components after adding component it shows a error in browser console and component not rendered:

Uncaught TypeError: Cannot convert a Symbol value to a string

Expected Behavior

Render normal web component like angular-output-target

Steps to Reproduce

create a vue test project. add vue component generate by stenciljs. test component: npm i @prismaui/vue@latest template to render test component:

Code Reproduction URL

https://github.com/prismaui/prismaui

Additional Information

No response

[sean-perkins]

Hello @mehrabix thanks for reporting this issue!

The team will triage this issue when they are available, but in the interim I would recommend downgrading your Vue component library to v3.2.x.

In v3.3.x of Vue, they changed a bit of the implementation around defineComponent, requiring us to disable type checking in the file as an interim solution. There is likely more that we need to account for in the generated wrapper to account for both v3.2 and v3.3 implementations.

[JessicaSachs]

It seems to be the aria-controls prop @mehrabix. If you take that off in source it'll work fine (obviously not an acceptable workaround). I know a lot changed in Vue 3.3 with regards to prop serialization + deserialization and the wrapper we're currently shipping has some runtime issues.

For now, if you just edit your Vue's dist'd components.js file to remove the ariacontrols, it'll work and all the inherited attrs will flow through. Can you do me a favor and let me know if you run into any similar issues? I'm trying to understand the scope of the breakage and changes wrt Vue 3.3.

[mehrabix]

Thanks for replay @JessicaSachs @sean-perkins i try both approach. and seems aria-controls is main problem. after get rid of Uncaught TypeError: Cannot convert a Symbol value to a string error i have same issuse faced like react that styles not loaded. i use JSX for both react and vue and checked out web component wrapper correctly loaded like prm-button in browser inspect elements. but styles not loaded. https://www.npmjs.com/package/@prismaui/vue https://www.npmjs.com/package/@prismaui/react i shoud mention that i declare all :root colors in global styles in sure its loaded but component styles not.

[JessicaSachs]

I'm going to keep this issue focused on the aria-controls issue - let's work on the styles issue in another GitHub issue, okay?

[mehrabix]

@JessicaSachs ok👍 will open new issue for style problem