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?

Why not move IBasic into its own file that could be imported by whatever needs it? — tony19
– tony19, Commented May 14, 2019 at 12:46
Although it's doable to put them into a separate file, I'm looking for the possibility to put them together with components. Especially when the interfaces are useless elsewhere. — Val
– Val, Commented May 14, 2019 at 14:38
Any news on this issue? Is collecting all exports to one default object only way to go for now? — vp_arth
– vp_arth, Commented Dec 6, 2019 at 9:37
Looks like vscode + [email protected] already fix the problem. — Val
– Val, Commented Sep 23, 2021 at 2:11
I can tell my vue-shim.d.ts file is the issue, but I'm not sure how to fix it — Joey Carlisle
– Joey Carlisle, Commented Dec 19, 2024 at 23:26

bad_coder · Accepted Answer · 2021-09-13 00:29:27Z

2

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.

edited Sep 13, 2021 at 0:29

bad_coder

13.3k20 gold badges58 silver badges92 bronze badges

answered Sep 13, 2021 at 0:20

Daniel Coglitore

854 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joey Carlisle Dec 19, 2024 at 23:11

This didn't work for me

Dave Mackey · Accepted Answer · 2023-03-29 17:30:36Z

2

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;
}

edited Mar 29, 2023 at 17:30

Dave Mackey

4,45221 gold badges84 silver badges147 bronze badges

answered Dec 29, 2021 at 0:56

PaKo Anguiano

1514 bronze badges

Comments

Dave Mackey · Accepted Answer · 2023-03-29 17:30:13Z

1

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.

edited Mar 29, 2023 at 17:30

Dave Mackey

4,45221 gold badges84 silver badges147 bronze badges

answered May 17, 2019 at 7:50

SergeyK

1,5972 gold badges13 silver badges15 bronze badges

1 Comment

V. Rubinetti Over a year ago

This seems like an actual solution unlike the other answers, but it seems a little heavy. Is there a way to modify the default shims-vue.d.ts declaration to accept an arbitrary named export.

Konstantin Vertinskiy · Accepted Answer · 2023-10-19 06:51:53Z

1

If you use WS then try to change Vue service in Settings - TypeScript - Vue to Vue Language Service

answered Oct 19, 2023 at 6:51

Konstantin Vertinskiy

1031 silver badge5 bronze badges

Comments

nomadoda · Accepted Answer · 2024-08-13 09:43:59Z

0

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

{
  "vue.server.hybridMode": false
}

answered Aug 13, 2024 at 9:43

nomadoda

5,0024 gold badges35 silver badges53 bronze badges

Comments

Diego Araújo · Accepted Answer · 2019-10-23 17:06:43Z

-1

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

answered Oct 23, 2019 at 17:06

Diego Araújo

1271 silver badge8 bronze badges

2 Comments

Brett Zamir Over a year ago

There is a default export but there is also a named IBasic which is presumably what is desired.

V. Rubinetti Over a year ago

Why is this upvoted. It doesn't answer the question in any way.

Tris · Accepted Answer · 2020-10-21 09:28:31Z

-1

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!

answered Oct 21, 2020 at 9:28

Tris

1912 silver badges11 bronze badges

Collectives™ on Stack Overflow

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

7 Answers 7

1 Comment

Comments

1 Comment

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

1 Comment

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related