reactjs - tsdx 和 babel 无法使用意外令牌构建典型的 TypeScript

Question

我正在创建一个小的 React 组件库。为此，我正在使用tsdx。不幸的是，构建失败（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.

对我来说，当我在 Storybook 中使用它时，语法看起来不错，并且相同的代码也可以工作。

未修改版本的 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>
  );
}

我也尝试使用 配置 Babel，preset-react但它并没有改变任何东西。有人知道这里发生了什么或如何获得更多解释性错误消息吗？

标签： reactjstypescriptcompiler-errorstsdx