Chrome Developer Tools SyntaxError: Unexpected token 'export' when refreshing page

Question

When using TypeScript v5.3.3 in a Vue v3.4.19 project bundled by Vite v5.1.3 the following code:

import { ContentPiece, ContentCategory } from "internal-library";

export interface ContentCategoryWithContentPieces extends ContentCategory {
  contentPieces: Array<ContentPiece>;
}

Produced a dev bundle with the source:

export type ContentCategoryWithContentPieces = ContentCategory & {
  contentPieces: Array<ContentPiece>;
};

Which causes the following error when Chrome dev tools are open and the page is refreshed:

SyntaxError: Unexpected token 'export' (at ContentCategoryUtils.ts:7:1)

Note: Although this may not be relevant, the error was thrown by the Vue Router v4.2.5. [Vue Router warn]: uncaught error during route navigation

Answer 1

Problem appears to occur because of the isloatedModules mode (recommended by Vite). The new Type-Only Imports and Exports syntax is recommended to exclude types from being included in the build output.

As the "internal-library" is a list of TypeScript interfaces, the code should be as follows:

import type { ContentPiece, ContentCategory } from "internal-library";

export interface ContentCategoryWithContentPieces extends ContentCategory {
  contentPieces: Array<ContentPiece>;
}

And where this interface is used in other components, it should be imported with the type keyword:

import type { ContentCategoryWithContentPieces } from "@/types/content";