CODEWITHSUNDEEP
typescriptvue.jsvisual-studio-codevuejs2
Val
Val

Reputation: 22797

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

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:

enter image description here

What can I do to import the interface successfully?

Upvotes: 34

Views: 31470

Answers (7)

nomadoda
nomadoda

Reputation: 4942

Solved this issue in VSCode & vue-class-components by disabling hybrid mode for the vue extension.

{
  "vue.server.hybridMode": false
}

Upvotes: 0

Konstantin Vertinskiy
Konstantin Vertinskiy

Reputation: 93

If you use WS then try to change Vue service in Settings - TypeScript - Vue to Vue Language Serviceenter image description here

Upvotes: 1

PaKo Anguiano
PaKo Anguiano

Reputation: 141

Try moving the interface into another TS file

component.vue

<template>
    <div class="app">
        <router-view></router-view>
    </div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
   
/**
 * Simplest container
 */
@Component
export class Basic extends Vue {}
export default Basic;
</script>

interfaces.ts

export interface IBasic {
    name :string;
}

Upvotes: 2

SergeyK
SergeyK

Reputation: 1577

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

Upvotes: 1

Daniel Coglitore
Daniel Coglitore

Reputation: 85

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.

Upvotes: 2

Tris
Tris

Reputation: 191

Using this Plugin in VS Code solved the Problem for me: https://github.com/HerringtonDarkholme/vue-ts-plugin

It is a fork that is actively maintained. I ran yarn add -D ts-vue-plugin and added these compiler options to my tsconfig.json:

compilerOptions: {
  "allowSyntheticDefaultImports": true,
  "plugins": [{ "name": "ts-vue-plugin" }]
}

My Code (storybook 6 file button.stories.ts):

import Button, { BUTTON_TYPE } from '@/components/Button.vue';

With this both the type import finally works and I can jump to the file (CMD+click) instead of jumping to the shims-vue.d.ts like it used to. Good luck!

Upvotes: -1

Diego Ara&#250;jo
Diego Ara&#250;jo

Reputation: 117

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

Upvotes: -1

Related Questions