Vue3/TypeScript - Can not import interface bc. of missing export default?

Question

I wrote an interface that I want to use in my component. However, it seems like I can't really import the interface and I can't see the reason why.

Here's the important code:

My interface in src/types/Job.ts

interface Job {
  name: string,
  salary: string,
  isPopular: boolean
}

export default Job

And my App.vue setup function & import:

<script lang="ts">
import { defineComponent, ref } from 'vue'
import Job from './types/Job'

export default defineComponent({
  setup() {
    const jobs = ref<Job[]>([
      {
        ...
      },
      {
        ...
      }
    ])

    return { jobs }
  }
})

As an error I am getting the following:

Uncaught SyntaxError: The requested module '/src/types/Job.ts' does not provide an export named 'default' (at App.vue:55:8)

And I really wonder why or what is missing. Anyone an idea?

Oh that worked, thanks! I was following a youtube tutorial that haven't added the "type" before in the import and it worked there. Really confusing but thanks! — JuniorDev
– JuniorDev, Commented Nov 7, 2022 at 12:37

Boussadjra Brahim · Accepted Answer · 2022-11-07 12:39:45Z

1

Try out to add type after the import keyword :

import type Job from './types/Job'

answered Nov 7, 2022 at 12:39

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

Collectives™ on Stack Overflow

Vue3/TypeScript - Can not import interface bc. of missing export default?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related