CODEWITHSUNDEEP
typescriptvue.jswebpackexportvuejs3
holycreeper
holycreeper

Reputation: 191

Vue 3 + TypeScript TS2614: Module '"*.vue"' has no exported member

I'm trying to make named export in one component like this:

export interface ITest { t: String }

to call it from another:

import { ITest } from '@/components/Test.vue'

And have the error:

TS2614: Module '"*.vue"' has no exported member 'ITest '. Did you mean to use 'import ITest from "*.vue"' instead?

And if I change to: import ITest from '@/components/Test.vue'

The error now says: Module '"(path)/Test.vue"' has no default export. Did you mean to use 'import { ITest } from "(path)/Test.vue"' instead?

How to make named export in Vue using TypeScript?

Vue 3, TypeScript, Webpack 5.

Upvotes: 7

Views: 4644

Answers (2)

HKK
HKK

Reputation: 187

Don't export at setup section.

The following works:

<script lang="ts">
export interface ITest { t: string }
</script>

I have also wondered this, and didn't find any workarouds, until finally I found this by myself.

You can take a look at your shims-vue.d.ts and you can find it's probably analizing setup block to infer the definition of a component behind the scene.

That is to say, the setup block defines the type DefineComponent<{}, {}, any>, so there may be no spaces for exporting any static type. Thus I tried to export it in pure script block, and it worked.

Upvotes: 3

huan feng
huan feng

Reputation: 8623

export interface ITest { 
  t: string; 
}
  • Change Test.vue to Test.ts, and where import it as well.
  • Change type String to typescript type string

Upvotes: 2

Related Questions