How to solve "_super.apply is not a function" in VueJS component (TypeScript)

Question

I'm a complete n00b with VueJS but have some experience with Angular and the likes. Mostly development. Not so much setting up the environment (webpack, gulp etc).

I've tried to setup VueJS with TypeScript and am pretty much in a working state. I do get the desired output but I also get some errors in the console that I would like to eliminate.

My simple component consists of these files...

index.vue

<template src="./countries.component.html"></template>
<script src="./countries.component.ts" lang="ts"></script>

countries.component.html

<section class="countries">
    <div>Countries...</div>
</section>

countries.component.ts

import * as Vue from 'vue';
import Component from 'vue-class-component'

@Component({})
export default class CountriesComponent extends Vue {}

This displays "Countries..." as it should but I get these errors in the console:

[Vue warn]: Error in data(): (found in at D:\Projects\sb1\src\components\countries\index.vue)

and

TypeError: _super.apply is not a function

Can anyone help me with what to do?

Also all my files are compiled and I can't debug them using Chromes Developer Tools. If anyone has a hint to what setting is causing this it'd be much appreciated...

Please let me know if I need to elaborate on anything :-)

Thanks in advance!

Answer 1

Trial and error... this fixed it:

Replacing

import * as Vue from 'vue';

with

import Vue from 'vue'