运行esbuild编译TSX代码时出现JSX语法错误，求排查原因

代码示例 #

export const createCategoriesParams = (filters: string[]) => {
  const tags = [...filters].filter(i => i !== 'All');
  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
  let row = <any>[];

  tags.forEach(item => {
    row.push(`tag=${item}`);
  });

  return row.join('&');
};

错误提示 #

The character ">" is not valid inside a JSX element

原因分析 #

• 核心问题出在let row = <any>[];这行的类型断言写法。在TSX语法中，<>是JSX元素的标识，esbuild会把<any>误解析为一个名为any的JSX组件，后续的[]被当作该组件的子内容，这直接打乱了代码的语法结构，导致tags.forEach(...)行的>被判定为处于JSX元素内部，触发错误。
• TSX文件中不允许使用尖括号形式的类型断言（<类型>），必须改用as语法，将该行修改为let row = [] as any;就能解决解析问题。
• 补充检查：确认esbuild配置中已正确配置TSX文件的loader（比如设置loader: { '.tsx': 'tsx' }），不过这不是当前错误的主要诱因，核心还是类型断言写法不符合TSX规范。

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