TypeError returned when using typescript component

[olivierceulemans]

When trying to define a customElement using a typescript component defined with Vue.extend, the library returns a "TypeError _init() is not defined" when the custom element is used in the html page.

I investigated a bit and it looks like the current version of vue-custom-element cannot accept a constructor function as second argument (Vue.extend is returning constructor functions rather than simple javascript objects).

I managed to bypass the error by removing the support for lazy loaded components in line 8 of vue-custom-element.js, forcing the value of the variable 'isAsyncComponent' to false. Obviously, this is not a good solution since I can now use my typescript components but support for lazy loaded components has been removed by this change. There should exist a better way to solve this issue.

Or maybe I'm doing something wrong. It would be great to have a simple typescript-based sample to help vue/typescript beginners like me.

Versions used: vue-custom-element: 3.2.5 vue-cli: 3.0.1 vue: 2.5.17

Regards,

[karol-f]

Hi, isn't it that problem - https://github.com/karol-f/vue-custom-element/issues/98#issuecomment-379756322 ?

[karol-f]

About an example, there is https://github.com/isaaclyman/vue-custom-element-ts-example prepared by @isaaclyman. Can You try this one?

[olivierceulemans]

Hi,

Thanks for your answers. I tried to call the constructor. Unfortunately, it doesn't seem to work either. There are warnings displayed in the console (unknown props) and the component is not rendered.

Unfortunately, the example provided doesn't use Vue.extend() to declare the typescript component. If you don't do that then you don't get the type checks of typescript (so it is a bit useless then to use typescript).

In fact, I also have the issue in plain javascript while using Vue.extend() to declare the component. I forked the repository and created a new demo component 'extend', based on the 'basic' demo.

https://github.com/olivierceulemans/vue-custom-element

I managed to make it work but then all code related to lazy components had to be removed and the properties need to be passed manually when registering the component.

[karol-f]

Hi, can you please prepare https://codesandbox.io/s/vue or GitHub repo with not working example? This would help a lot.

[olivierceulemans]

Hi, here it is: https://codesandbox.io/s/wn8jnmlqk

I just modified the HelloWorld component.

[karol-f]

Hi, I've cleaned up a bit your example - https://codesandbox.io/s/8lwwq9mq12

It's still not working, probably because as stated in docs (https://vuejs.org/v2/guide/typescript.html#Annotating-Return-Types) you have to annotate render function - check closed issue here https://github.com/vuejs/vue/issues/6921#issuecomment-339524548.

[olivierceulemans]

Hi, thanks but the codesandbox is in pure javascript so I can't annotate render function.

[karol-f]

Can You please check solutions from linked issue/docs?

[karol-f]

Feel free to provide additional details. Regards!