I have the correct export statement, but still get an error "Uncaught SyntaxError"

Question

The error I get is

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

This is my code:

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

@ indicated ./src

// /src/api/comment/CommentApi.ts
import myAxios from "@/api/request";
import Comment from "@/pojo/Comment" // Tip: Error here

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);
}

I use Vite + Vue3. I also tried to switch to named export statement. If other code is needed, I will provide it soon.

Answer 1

Try using a type-only import: import type Comment from "@/pojo/Comment".

The SyntaxError is a JavaScript error, which must mean that import statement is not being stripped out by your build process. But the default export of src/pojo/Comment.ts doesn't refer to a value (it refers to an interface), so it is being stripped out when compiling, meaning the resulting .js file has no default export.