Блог

Я создаю небольшую библиотеку компонентов React. Для этого я использую tsdx. К сожалению, build fails ( 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>
  );
}
  

Я также пытался настроить Babel с preset-react помощью, но это ничего не меняет. У кого-нибудь есть идея, что здесь происходит, или как я могу получить более поясняющее сообщение об ошибке?