TypeScript+Vue3如何解决模块未提供指定命名导出报错

问题根因 #

你遇到的报错核心是两个模型文件形成了运行时循环依赖：Product.ts 导入 Category 类型，Category.ts 又反过来导入 Product 类型，ES模块加载时会出现其中一个模块尚未完成导出初始化就被引用，最终识别不到导出的Product成员。
你之前尝试的export default导出、移除导入花括号的方案没有生效，是因为这些操作没有解决循环依赖的本质问题。

修复方案 #

方案1：使用import type语法导入类型（推荐） #

TS接口属于仅类型标注的内容，编译为JS后会被完全擦除，不需要出现在运行时导入逻辑里。使用TS原生的类型专属导入语法，可以直接切断运行时的循环引用链：

1. 修改Product.ts的导入语句

// 仅导入类型，编译后会被擦除，不会生成运行时代码
import type { Category } from "@/Models/Category";

export interface Product {
    id: number;
    name: string;
    slug: string;
    description: string;
    price: number;
    categories: Category[];
    quantity: number;
}

2. 修改Category.ts的导入语句

import type { Product } from "@/Models/Product"

export interface Category {    
    id: number
    name: string
    slug: string
    // relations
    products: Product[]   
}

方案2：合并关联接口到同一文件 #

如果项目里关联模型较多，也可以把存在双向引用关系的接口定义放到同一个文件中，从结构上避免跨文件循环导入：
新建统一模型出口文件src/Models/index.ts，把两个接口的定义都迁移进去：

export interface Product {
    id: number;
    name: string;
    slug: string;
    description: string;
    price: number;
    categories: Category[];
    quantity: number;
}

export interface Category {    
    id: number
    name: string
    slug: string
    products: Product[]   
}

后续使用时直接从@/Models路径导入需要的接口即可。

额外注意 #

如果修改代码后报错依然存在，大概率是Vite的预构建缓存导致的，执行以下命令清理缓存后重启开发服务即可：

# 删除Vite缓存目录
rm -rf node_modules/.vite
# 重启开发服务
npm run dev

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