Vue | Module has no default export

Question

I'm facing an error with vue3, ts, vue cli where it says Module '"c:/Users/USER/Documents/top-secret-project/src/components/Features/Features.vue"' has no default export. when importing a component from a file I have no idea why did this specific component decide to now work.

here's Features.vue

<script lang="ts">
import Feature from "./Feature.vue";
</script>

<template>
  <Feature />
</template>

Neap

Please share the content of Features.vue? – Wellnigh

@BoussadjraBrahim, it's just a div with script setup and inside it is an import of a component – Neap

so where is said setup in your code? – Histoid

Oh, well I didn't notice it ;-; – Neap

Answer 1

With script setup syntax there's no need to add export default in your script, just add the setup attribute to your script:

<script lang="ts" setup>
import Feature from "./Feature.vue";
</script>

<template>
  <Feature />
</template>

You should disable Vetur extension and use Vue - official (ex Volar)

Wellnigh

I'm using Vue 3 with vite and I'm thinking something is wrong with Vetur, because my code has setup as you said and it keep saying no export default in module – Arica

@Shad, you should disable vetur extension and use Volar instead of it – Wellnigh

Volar extension is deprecated. Use the Vue - Official (Id: Vue.volar) – Steviestevy

@Steviestevy you're right – Wellnigh

Answer 2

A @Boussadjra mentioned this could happen in Visual Studio Code if Vetur extension is installed there. Insetted of Vetur if we install Volar extension in Visual Studio Code this problem gets solved.

Convexoconvex

This issue is addressed in the vue 3 documentation, vuejs.org/guide/typescript/overview.html#volar-takeover-mode. – Nereidanereids

Adding to this answer, they have now marked Volar as deprecated and recommend to use Vue - Official extension instead (marketplace.visualstudio.com/items?itemName=Vue.volar) – Hanford

Answer 3

You must add export default in your component's script by example:

<script>
export default {
  name: "HelpView",
};
</script>

Uralian

Answer 4

Official Recommended Setup

• VS Code + Vue - Official (previously Volar) and disable Vetur

Just disable Vetur Ext and install Vue - Official Ext

Adellaadelle