Vue / Typescript, got Module '"*.vue"' has no exported member

Question

I want to export several interfaces together with Component from .vue file.

Basic.vue:

<template>
    <div class="app">
        <router-view></router-view>
    </div>
</template>

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

export interface IBasic {
    name :string;
}

/**
 * Simplest container
 */
@Component
export class Basic extends Vue {}
export default Basic;
</script>

But when I import it from another .ts file, I got:

What can I do to import the interface successfully?

Answer 1

You can try to use ktsn/vuetype than will generate custom declaration file for every your component file, instead of using default shims-vue.d.ts declaration.

Answer 2

You can drop the { } from your import. It’s a default export, so then you write import IBasic from "@/../containers/Basic"

Answer 3

I had this same problem and realize that despite of no having errors on my IDE, the error was still thrown so I just Restart the server and it works perfectly... I have to do this every time I created a import or export anything with TS.