Error When Using TypeScript in Vue Component File

[JohnLouderback]

I started with electron-forge's Vue template and went ahead and added TypeScript to it. It mostly works, but I keep getting an error when running the TypeScript within the Vue Component File

Uncaught TypeError: Class extends value undefined is not a constructor or null

For this line:

export default class App extends Vue {

This is derived from this Vue file:

<template>
  <h2>Hello from {{text}}</h2>
</template>

<script lang="ts" type="text/typescript">
import Vue from 'vue';
import Component from 'vue-class-component';

@Component
export default class App extends Vue {
  public text : string = '';
}
</script>

It seems to believe that Vue isn't defined. Using this same import line in the index.html file works flawlessly:

<script lang="ts" type="text/typescript">
  import Vue from 'vue';
  import App from './test';

  const app = new Vue(App).$mount('#test');

  app.text = "Electron Forge with Vue.js!";

  </script>

I did notice that, however, in its own .ts file, the code still will fail with the same error:

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

@Component
export default class App extends Vue {
  public text : string = '';
}

I've been scratching my head over this one and I'm at a total loss.

For what it's worth, these are my dependencies and devDependencies:

  "dependencies": {
    "electron-compile": "^6.4.1",
    "electron-devtools-installer": "^2.2.0",
    "vue": "^2.3.3",
    "tslib": "^1.4.0"
  },
  "devDependencies": {
    "babel-plugin-transform-async-to-generator": "^6.24.1",
    "babel-preset-env": "^1.5.1",
    "babel-preset-react": "^6.24.1",
    "electron-prebuilt-compile": "1.6.11",
    "tslint": "^4.2.0",
    "typescript": "~2.1.4",
    "vue-class-component": "^5.0.1",
    "vue-devtools": "^3.1.2",
    "vueify": "^9.4.1"
  }

Edit: I also noticed changing my target for TypeScript in the .compilerc file to ES5 did not change anything at all. Maybe the issue is that my TypeScript settings are being ignored?

[jandauz]

Have you figured this out? I'm running into this issue as well. Vue is undefined. I can get past that issue if I do import * as Vue from 'vue'. However, my Test component would be undefined.

I followed the guide here regarding Vue + Typescript. Adding allowSyntheticDefaultImports to .compilerc should allow me to simply write import Vue from 'vue' but it doesn't seem to work. I'm not sure if electron-compile is honoring that flag in the config. The linked documented parameters for Typescript does not have that flag.

[sjb933]

Any updates on this?

[sbmw]

FYI I had the exact same issue until I noticed in the link from @jandauz that the recommended module type in tsconfig is es2015. I was using commonjs previously. After switching to es2015 and fixing up a couple of import statements it all works as expected.