Vue3组件编辑器终端报Module无默认导出错误，但浏览器运行正常的原因排查求助

我来帮你排查这个问题——其实这个报错的核心原因是TypeScript静态类型检查和Vue的<script setup>编译逻辑之间的差异：浏览器能正常运行是因为Vue的SFC编译器已经帮你处理了组件导出，但编辑器的TS检查是静态分析，没识别到编译后的隐式导出逻辑，所以抛出了错误。

问题根源 #

你的TestIcon.vue用了<script setup lang="ts">语法糖，这种写法下组件的默认导出是由Vue编译器自动生成的，不会在源码里显式写出export default。但你的App.vue用了选项式API的写法，直接import TestIcon from "@/components/TestIcon.vue"，TS编辑器在静态扫描源码时找不到明确的默认导出，就会抛出No default export的错误。

解决方案（两种可选） #

方案1：将App.vue改为<script setup>写法（推荐）

这是Vue3最推荐的写法，能自动处理组件的导入和注册，TS也能完美识别组件类型：

<template>
  <main>
    <TestIcon :icon="'icon_test'" :class="'tests'" :height="40" :width="40" />
  </main>
</template>

<script setup lang="ts">
import TestIcon from "@/components/TestIcon.vue";
</script>

修改后编辑器的TS检查会自动识别组件的导出类型，报错会直接消失，同时代码也更简洁符合Vue3的最佳实践。

方案2：给TestIcon.vue添加显式的默认导出（适合保留选项式API场景）

如果你需要保留App.vue的选项式写法，可以在TestIcon.vue里额外添加一个普通的<script>块，显式导出默认对象：

<template> 
  <span v-html="svg" class="icon-wrapper" ref="iconWrapper"></span> 
</template> 

<script setup lang="ts">
// 原有代码保持不变
import type { tycon } from "test-icons"; 
import { computed, onMounted, ref } from "vue"; 
import { completeDataSet } from "test-icons"; 

const props = defineProps<{ 
  icon: tycon; 
  class: string; 
  color: string; 
  height: string; 
  width: string; 
}>(); 

const iconPassed = completeDataSet.find((item) => item.name === props.icon); 
const svg = computed(() => iconPassed?.data); 
const iconWrapper = ref<HTMLElement | null>(null); 

onMounted(() => { 
  iconWrapper.value?.lastElementChild?.firstElementChild?.setAttribute( "class", props.class ); 
  iconWrapper.value?.firstElementChild?.setAttribute( "style", "width:" + props.width + "px;height:" + props.height + "px;" ); 
  iconWrapper.value?.firstElementChild?.firstElementChild?.setAttribute( "fill", props.color ); 
}); 
</script>

<!-- 新增此块显式导出默认对象，供TS识别 -->
<script lang="ts">
export default {};
</script>

这样TS编辑器就能找到明确的默认导出，报错会随之解决。

补充说明 #

为什么浏览器能正常运行？因为Vue的单文件组件编译器在处理<script setup>时，会自动生成包含组件选项的默认导出，所以运行时逻辑是完整的，只是编辑器的静态TS检查没处理这个编译后的隐式逻辑，才会出现报错。

内容的提问来源于stack exchange，提问作者DnD2k21