Vue+Quasar组件重构时，已导出的Org类型为何提示模块未提供该导出？

问题场景 #

重构Vue+Quasar组件时，src/components/model.ts中导出的Org类型在浏览器控制台报错，提示该模块未提供名为Org的导出，但VS Code对导入语句无任何报错提示。

相关代码与目录结构：

• 目录结构：

  my-app/
  ├─ src/
  │  ├─ components/
  │  │  ├─ M2Details.vue
  │  │  ├─ model.ts
  

• M2Details.vue中的导入代码：

  <script setup lang='ts'>
  import { Org, OrgDetails} from './model.ts';
  (...)
  </script>
  

• model.ts中的类型定义：

  // single organization and its results
  export type Org = {
    OrgDetails: OrgDetails
    Org: OrgDetails[]
  }
  
  export type OrgDetails = {
    Boss: string
    NrTested: number
    NrFailed: number
  }
  

• 控制台错误：

  Uncaught SyntaxError: The requested module '/src/components/model.ts' does not provide an export named 'Org' (at M2Details.vue:12:10)
  

可能的原因及解决方法 #

1. TypeScript类型导入未明确标注 #

在Vue的<script setup>中，纯TypeScript类型的导入需要使用type关键字明确标识，否则部分打包工具（如Vite）会在编译时将类型移除，导致运行时找不到对应的导出项。

修改导入语句为：

import type { Org, OrgDetails } from './model.ts';

2. 开发缓存或构建残留 #

开发服务器的缓存、旧构建产物可能导致代码更新未被正确识别。可以尝试：

• 关闭当前开发服务器
• 删除项目根目录下的node_modules/.vite（Vite项目）或dist文件夹
• 重启VS Code和开发服务器，强制触发全量重新构建

3. 类型定义顺序问题 #

虽然TypeScript支持类型的前置引用，但部分打包工具对这种“先使用后定义”的类型处理可能存在兼容问题。调整model.ts中的类型定义顺序，先定义OrgDetails再定义Org：

export type OrgDetails = {
  Boss: string
  NrTested: number
  NrFailed: number
}

export type Org = {
  OrgDetails: OrgDetails
  Org: OrgDetails[]
}

4. 文件名/路径大小写不匹配 #

如果项目运行在区分文件名大小写的操作系统（如Linux、macOS）上，实际文件名若与导入路径的大小写不一致（比如实际是Model.ts，导入写的是model.ts），VS Code会忽略大小写差异，但浏览器和打包工具会严格校验，导致找不到正确文件进而无法识别导出项。

检查并确保导入路径的文件名大小写与实际文件完全一致。

5. TypeScript配置的isolatedModules限制 #

若项目tsconfig.json中开启了compilerOptions.isolatedModules: true，TypeScript会强制要求所有类型导入必须使用import type语法，否则会出现导出未找到的错误。

查看tsconfig.json中的对应配置，若开启了该选项，必须使用类型导入语句。

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