Chrome 开发者工具语法错误：刷新页面时出现意外的令牌“导出”

Question

在 Vite v5.1.3 捆绑的 Vue v3.4.19 项目中使用 TypeScript v5.3.3 时，以下代码：

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

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

使用源代码生成了一个开发包：

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

当 Chrome 开发工具打开并刷新页面时，会导致以下错误：

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

注意：虽然这可能不相关，但该错误是由 Vue Router v4.2.5 引发的。

[Vue Router warn]: uncaught error during route navigation

Answer 1

它归结为 类型被添加到 JavaScript 源，当您的

tsconfig.json

中设置以下内容时：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    // ...
    },
    "lib": [
      "esnext",
      // ...
    ]
  }
  // ...
}

我通过将

"esnext"

值设置为

"ES2022"

修复了错误。