Vue Custom Element in Typescript Error

[ryangiordano]

When attempting to call Vue.use(VueCustomElement), the compiler throws an error:

__WEBPACK_IMPORTED_MODULE_0_vue__.default.customElement is not a function

Opening up the index.d.ts file and adding: static default:any to the class, then calling: Vue.use(VueCustomElement.default) appears to fix this error, though I'm not sure if this is the correct way of going about doing this.

@isaaclyman Is it possible to see an example of the correct implementation of custom elements in Typescript?

[karol-f]

Hi, it's probably due to your import of VueCustomElement. Can you confirm that you are calling import 'vue-custom-element' and not require('vue-custom-element')? This should get rid of .default.

[isaaclyman]

@thedaruma In theory there shouldn't be a logical difference between import and require syntax, but it would be helpful to see an MCVE. You haven't really provided enough information for us to troubleshoot the problem.

[karol-f]

In case of using e.g. Webpack with native ES Modules support, actually there is difference - all require(...) ends up with object that have properties like default or other named exports.

@thedaruma Please confirm that changing import is solving the issue. If not please feel free to re-open this thread.

Regards!

[ryangiordano]

I am importing vue-custom-element using import as below:

import VueCustomElement from 'vue-custom-element';
import Test from "./components/Test.vue";

Vue.use(VueCustomElement);

Vue.customElement('hello-test',new Test().$options);

There is an error appearing under VueCustomElement, stating that it has no default export.

Test.vue:

<template>
<div>
    This is just a test
</div>
</template>

<script lang="ts">
import Vue from "vue";
 export default Vue.extend({
    data:()=>{
      return{

      }
    },
    created(){
      console.log(this.test)
    },
    props: [
      'test'
    ]
  });
</script>`

I am using this with the [Typescript Vue Starter](https://github.com/Microsoft/TypeScript-Vue-Starter)

Let me know if I can provide any further details.

[isaaclyman]

@thedaruma The latest release should resolve this issue, if you're still seeing it. Sorry about the delay.

[ryangiordano]

Thank you for your work on this. I am able to move forward. Really appreciate it!