Search code examples
javascripttypescriptvue.jsvue-dynamic-components

'Uncaught TypeError: Class extends value undefined is not a constructor or null' when trying to load external TypeScript component


I have something in place where I can build my components using this npx command (run in PowerShell):

&npx vue-cli-service build `
    --target lib `
    --formats umd-min `
    --no-clean `
    --dest $destinationFolder `
    --name $component.Name $component.FullName

and then I import those into my vue app as per this article

It works fine when the components are written using JS, but as soon as I try to make one in TS I get this error:

file:7 Uncaught TypeError: Class extends value undefined is not a constructor or null
    at Module.fb15 (file:7)
    at r (file:1)
    at 8875 (file:1)
    at file:1
    at file:1
    at file:1

My TypeScript vue component is really simple:

<template>
<h1>A lovely typescript component</h1>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component({
    name: 'TypeScriptTest'
})
export default class TypeScriptTest extends Vue { }
</script>

I did try importing vue like this instead:

import Vue from 'vue'

but it had no effect

Does anyone know how I can resolve this?


Solution

  • I added this line to the top of my html file:

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    

    And the errors went way, and my TypeScript comopnents imported successfully

    This does not seem like an ideal solution, but it does work