Importing interface from vue component

[germanp]

Hey,

I'm using ts-jest with vue-jest but I can't import interfaces from the .vue component files. I'm getting this error:

Module '"*.vue"' has no exported member 'Option'.

Does vue-jest support exporting interfaces? or maybe it is not related with vue-jest. Anyway, I appreciate some guidance on that. Thanks

[brianchhun]

Also running into this issue.

[JordanMajd]

I think this is the same issue, if not I can split into my own. While using jest + typescript I can't import non-default exports from .vue files. Although, I have no issue doing this with other .ts files while running my standard build. The following example would produce: TS2614: Module '"*.vue"' has no exported member 'IMyComponent'. Did you mean to use 'import IMyComponent from "*.vue"' instead?

mycomponent.vue:

<template>
...
</template>
<script lang="ts">
export interface IMyComponent extends Vue {
  ...
};
export default Vue.extend({
 ...
});
</script>

mycomponent.spec.ts (compiles fine normal build, blows up when running jest):

import MyComponent, { IMyComponent } from "../mycomponent.vue";

someother.ts (compiles fine normal build):

import MyComponent, { IMyComponent } from "../mycomponent.vue";

[freezer278]

same issue

[jackdomleo7]

Any further progression on this? 🤔

Currently, I have to write this just as a mental note of what the interface is:

import MyComponent/*, { IMyComponent }*/ from "../mycomponent.vue"

because as @JordanMajd mentions, writing the below just doesn't work:

import MyComponent, { IMyComponent } from "../mycomponent.vue"

I've noticed the needs repro label... I can create a Code Sandbox (or similar) if needed?

[jackdomleo7]

Hi, please find a repository here with the repro steps listed in the project's README. 🤞 Can the needs repro tag be removed?

[james75]

I'm also experiencing this, any solution?

[jackdomleo7]

@james75 Nope. There are currently 2 indirect solutions (but ideally we want someone maintaining this repo to respond to this issue):

1. Move your interfaces into a separate file
2. Test without the types

[JordanMajd]

Giving this a 2021 bump, I'm happy to help with the solution.

[tylerrrkd]

Giving this a 2021 bump, I'm happy to help with the solution.

Hi friend, do you have any solution? Exporting interface inside component is much convenient for component file.

[MatthD]

It's still the case, we cannot import types from component in TS files.. but it work in another .vue file !

[AlaaEl-DinAhmed]

I guess it's solved with TypeScript 3.8 as we can add type before the type name import.

import MyComponent, { type IMyComponent } from "../mycomponent.vue";

More details type-only imports — A new TypeScript feature that benefits Babel users

[jackdomleo7]

I guess it's solved with TypeScript 3.8 as we can add type before the type name import.

import MyComponent, { type IMyComponent } from "../mycomponent.vue";

More details type-only imports — A new TypeScript feature that benefits Babel users

@AlaaEl-DinAhmed, I tried your suggest in my repro repo and still getting the same result.

[jackdomleo7]

Hi, please find a repository here with the repro steps listed in the project's README. 🤞 Can the needs repro tag be removed?

FYI I have deleted this reproduction repository due to it being available for 2.5 years and no activity on this issue. I have also switched to Vitest for almost all of my projects so this issue is no longer of interest to me.