vue3 with vite can't import .ts interface

Question

edit: similar to vitejs bug but different because I don't reimport.

edit2: i just created a new clean project vue build tools and just selected the typescript features and it still doesn't work.

edit3: demo

I can't import the following interface:

export interface Topic {
   title: string;
   description: string;
}

in App.vue:

import { Topic } from "@/models/topic";

The requested module '/src/models/topic.ts' does not provide an export named 'Topic'

What is happening here? I followed this guide vue build tools

That demo link does not demonstrate the problem, as App.vue is not even using TypeScript (which causes an unrelated compiler error). Can you update the demo so that it actually reproduces the original problem in question? — tony19
– tony19, Commented Apr 30, 2022 at 1:35

Emmanuel · Accepted Answer · 2022-08-16 08:57:34Z

5

You have two problems here:

1 - In the script tag you forgot to tell vue that you want to use TS:

<script setup lang="ts">

2 - The way to import a type or interfaces should be as follow:

import type { Topic } from './models/topic'

answered Aug 16, 2022 at 8:56

Emmanuel

631 silver badge6 bronze badges

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

1 Answer 1