No matching export for import typescript interface

[lake2]

Describe the bug

Uncaught SyntaxError: The requested module '/app.ts' does not provide an export named 'Test'

Reproduction

https://github.com/lake2/vite_bug

System Info

• vite version: 2
• Operating System: mac
• Node version: v15.5.0
• Package manager (npm/yarn/pnpm) and version: npm 6.14.11

[willx12123]

I have the same problems tonight. But one day before, it works fine!!! I didn`t update any dependency!

[CHOYSEN]

This is because the imported TypeScript type exists in the export statement, which should normally be type-erased.

You can avoid passing TypeScript types by importing them directly in the desired file.

[lake2]

This is because the imported TypeScript type exists in the export statement, which should normally be type-erased.

You can avoid passing TypeScript types by importing them directly in the desired file.

I can run it in parcel, and export type interface is common in project. We shouldn't avoid it. Vite should process it corrrectly like parcel.

[willx12123]

This is because the imported TypeScript type exists in the export statement, which should normally be type-erased.

You can avoid passing TypeScript types by importing them directly in the desired file.

I think export interface SomeInterface { } is really common. For example, in Angular`s first tutorial, it recommend us to do it.

[CHOYSEN]

I think export interface SomeInterface { } is really common. For example, in Angular`s first tutorial, it recommend us to do it.

Yes, i know it is a correct behavior. I mean the better way is not to re-export the Typescript interface. If you have to write it this way, please use export type {} instead.

[CHOYSEN]

And maybe we should do some warning for this way? @yyx990803

[willx12123]

I think export interface SomeInterface { } is really common. For example, in Angular`s first tutorial, it recommend us to do it.

Yes, i know it is a correct behavior. I mean the better way is not to re-export the Typescript interface. If you have to write it this way, please use export type {} instead.

I got it. Yes you are right, export type just one time is correct in vite. But I am used to create a folder named modules and create child folder for each module in my project. For example I create a type in modules/common/types/some.type.ts. Then I import it with all components/util functions/assets... we need to use in modules/common/index.ts. **Finally I export them all concentrated. **So I can use them like import { SomeType, IconComponent, menu_svg } from "@modules/common";. So re-export a type is really common for me😭😭😭. Really hope vite can fix it as soon as possible.

[yyx990803]

This is a wontfix because esbuild transforms files in isolation. If you really want this behavior you need to disable esbuild and use something like @rollup/plugin-typescript.

[CarterLi]

This is a wontfix because esbuild transforms files in isolation. If you really want this behavior you need to disable esbuild and use something like @rollup/plugin-typescript.

But what about tsx?

[nieaowei]

I think export interface SomeInterface { } is really common. For example, in Angular`s first tutorial, it recommend us to do it.

Yes, i know it is a correct behavior. I mean the better way is not to re-export the Typescript interface. If you have to write it this way, please use export type {} instead.

I wonder the best way that you mean. Thanks.

[pingustar]

I have the same issue. What is the correct way of defining/exporting/importing interfaces @yyx990803?

[IndexXuan]

@pingustar
use import type/export type syntax.

[willx12123]

I have the same issue. What is the correct way of defining/exporting/importing interfaces @yyx990803?

Do not re-export interface in vite. You can just export it in file A and import it in file B. Don`t try to export it in file B again.

[pingustar]

I have the same issue. What is the correct way of defining/exporting/importing interfaces @yyx990803?

Do not re-export interface in vite. You can just export it in file A and import it in file B. Don`t try to export it in file B again.

Sorry, for asking again... I seem to do something wrong.

I have a types.ts file

export type User = {
  name: string
  age: number
}

and in my component

<script setup lang="ts">
import { ref } from 'vue'
import { User } from '~/types'

const users = ref<User[]>([])
</script>

Which results in the following error logged to the browser console:

Uncaught SyntaxError: The requested module '/src/types.ts?t=1616447029056' does not provide an export named 'User'

What am I missing?

[patak-dev]

There is a know issue in Vue with type imports, it should work if you use the import type form

import type { User } from '~/types'

@pingustar let's avoid commenting on old issues, your question may end up being ignored. Please start a GitHub Discussion or join the chat at Vite Land to ask questions.

[wolfzwz]

This is a wontfix because esbuild transforms files in isolation. If you really want this behavior you need to disable esbuild and use something like @rollup/plugin-typescript.
Another way：
a.js

export defalut interface list {}

b.js
It can be quoted like this

import {defalut as list} from 'a.js'

[notiv-nt]

I had this error when a variable was named as an interface

[mariuslundgard]

I had this issue with an interface named Node. Renamed it to something else, and it worked.