Vite+Vue3中导出接口仍报Uncaught SyntaxError错误求助

报错信息 #

Uncaught SyntaxError: The requested module '/src/pojo/Comment.ts' does not provide an export named 'default' (at CommentApi.ts:2:8)

相关代码 #

/src/pojo/Comment.ts #

export default interface Comment {
    userId: string;
    time: string; // yyyy-MM-dd HH:mm:ss
    context: string;
    up: number;
    songListId: string;
}

/src/api/comment/CommentApi.ts（@代表./src） #

import myAxios from "@/api/request";
import Comment from "@/pojo/Comment" // 报错位置

const prefix = '/api/comment';
export const getCommentBy = async (songListId: string, userId: string) => {
    return await myAxios.get(prefix, {
        params: {
            songListId,
            userId
        }
    })
}

export const saveComment = async (comment: Comment) => {
    return await myAxios.post(prefix, comment);
}

解决方案 #

方案1：修复默认导出的缓存/冲突问题 #

你的默认导出和导入写法本身符合语法，报错大概率是Vite缓存导致的，尝试以下操作：

• 彻底重启Vite开发服务
• 用Ctrl+Shift+R强制刷新浏览器，清除缓存
• 检查Comment.ts文件是否存在其他导出语句（比如同时写了默认导出和命名导出但语法错误）

方案2：切换为命名导出（TypeScript推荐方案） #

TypeScript中类型导出更推荐使用命名导出，兼容性更好，修改如下：

1. 修改Comment.ts为命名导出：

// /src/pojo/Comment.ts
export interface Comment {
    userId: string;
    time: string; // yyyy-MM-dd HH:mm:ss
    context: string;
    up: number;
    songListId: string;
}

2. 修改CommentApi.ts的导入语句：

import { Comment } from "@/pojo/Comment"

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