Reactjs tsdx和babel无法使用意外标记构建典型的TypeScript

我正在创建一个小的React组件库。我用的就是这么做。不幸的是，构建失败（

tsdx build

）已经失败，出现了一个非常基本的错误

$ tsdx build
✓ Creating entry file 1.3 secs
(babel plugin) SyntaxError: /workspaces/react-section-dividers/src/AslantDividedSection.tsx: Unexpected token, expected ";" (5:5)

  3 | import { DividerPosition } from './Divider';
  4 | 
> 5 | type AslantSectionProps = {
    |      ^
  6 |   topHeight: string;
  7 |   bottomHeight: string;
  8 |   polygon: string;

at undefined:5:5
SyntaxError: /workspaces/react-section-dividers/src/AslantDividedSection.tsx: Unexpected token, expected ";" (5:5)

  3 | import { DividerPosition } from './Divider';
  4 | 
> 5 | type AslantSectionProps = {
    |      ^
  6 |   topHeight: string;
  7 |   bottomHeight: string;
  8 |   polygon: string;
    at Object._raise (/workspaces/react-section-dividers/node_modules/@babel/parser/lib/index.js:790:17)
    at Object.raiseWithData (/workspaces/react-section-dividers/node_modules/@babel/parser/lib/index.js:783:17)
    at Object.raise (/workspaces/react-section-dividers/node_modules/@babel/parser/lib/index.js:777:17)
    at Object.unexpected (/workspaces/react-section-dividers/node_modules/@babel/parser/lib/index.js:9095:16)
    at Object.semicolon (/workspaces/react-section-dividers/node_modules/@babel/parser/lib/index.js:9077:40)
    at Object.parseExpressionStatement (/workspaces/react-section-dividers/node_modules/@babel/parser/lib/index.js:12179:10)
    at Object.parseStatementContent (/workspaces/react-section-dividers/node_modules/@babel/parser/lib/index.js:11775:19)
    at Object.parseStatement (/workspaces/react-section-dividers/node_modules/@babel/parser/lib/index.js:11639:17)
    at Object.parseBlockOrModuleBlockBody (/workspaces/react-section-dividers/node_modules/@babel/parser/lib/index.js:12221:25)
    at Object.parseBlockBody (/workspaces/react-section-dividers/node_modules/@babel/parser/lib/index.js:12207:10)

error Command failed with exit code 1.

对我来说，当我在故事书中使用它时，语法看起来很好，同样的代码也在工作

tsdx的未修改版本出现错误

0.14.0

。发生错误的整个文件如下所示：

import styled from '@emotion/styled';
import React, { PropsWithChildren } from 'react';
import { DividerPosition } from './Divider';

type AslantSectionProps = {
  topHeight: string;
  bottomHeight: string;
  polygon: string;
};

const AslantSection = styled.section`
  margin-top: ${(props: AslantSectionProps) => `-${props.topHeight}`};
  padding-top: ${(props: AslantSectionProps) => props.topHeight};
  margin-bottom: ${(props: AslantSectionProps) => `-${props.bottomHeight}`};
  padding-bottom: ${(props: AslantSectionProps) => props.bottomHeight};
  clip-path: ${(props: AslantSectionProps) => props.polygon};
`;

type AslantDividerSettings = {
  flip?: boolean;
  height: string;
};

type AslantDividedSectionProps = PropsWithChildren<{
  className?: string;
  divider: { [position in DividerPosition]?: AslantDividerSettings };
}>;

export function AslantDividedSection({ children, className, divider }: AslantDividedSectionProps) {
  let topLeft = divider.top?.height || '0';
  let topRight = '0';
  if (divider.top?.flip) {
    topRight = topLeft;
    topLeft = '0';
  }

  let bottomRight = divider.bottom?.height ? `calc(100% - ${divider.bottom.height})` : '100%';
  let bottomLeft = '100%';
  if (divider.bottom?.flip) {
    bottomLeft = bottomRight;
    bottomRight = '100%';
  }

  const polygon = `polygon(0 ${topLeft}, 100% ${topRight}, 100% ${bottomRight}, 0% ${bottomLeft});`;
  const topHeight = divider.top?.height || '0';
  const bottomHeight = divider.bottom?.height || '0';
  return (
    <AslantSection className={className} polygon={polygon} topHeight={topHeight} bottomHeight={bottomHeight}>
      {children}
    </AslantSection>
  );
}

从'@emotion/styled'导入样式；
从“React”导入React，{PropsWithChildren}；
从“./Divider”导入{DividerPosition}；
类型斜截面支柱={
顶高：弦；
底高：弦；
多边形：字符串；
};
const AslantSection=styled.section`
边距顶部：${（props:AslantSectionProps）=>`-${props.topHeight}`}；
padding top:${（props:AslantSectionProps）=>props.topHeight}；
边距底部：${（props:AslantSectionProps）=>`-${props.bottomHeight}`}；
填充底部：${（props:AslantSectionProps）=>props.bottomHeight}；
剪辑路径：${（props:AslantSectionProps）=>props.polygon}；
`;
类型倾斜分割设置={
翻转？：布尔；
高度：弦；
};
键入AslantDividedSectionProps=PropsWithChildren；
导出函数AslantDividedSection（{children，className，divider}:AslantDividedSectionProps）{
设topLeft=分隔器。顶部？。高度| |“0”；
设topRight='0'；
如果（分隔器.顶部？.翻转）{
右上=左上；
左上角='0'；
}
设bottomRight=divider.bottom？height？`calc（100%-${divider.bottom.height}）`100%'；
让bottomLeft='100%'；
如果（分隔器.底部？.翻转）{
底部左=底部右；
右下角='100%'；
}
const polygon=`多边形（0${topLeft}，100%${topRight}，100%${bottomRight}，0%${bottomLeft}）；`；
const topHeight=分隔器.top？.height | | |“0”；
const bottomHeight=分隔器.bottom？.height | | |“0”；
返回(
{儿童}
);
}

我还尝试用

预设react

配置Babel，但它并没有改变任何东西。有没有人知道这里发生了什么，或者我如何得到一条更具解释性的错误消息