I'm creating a little React component library. For doing so I'm using tsdx. Unfortunately the build fails (tsdx build
) already fails with a very basic error.
$ 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.
For me the syntax looks fine and also the same code is working, when I use it within the Storybook.
The error arises with an unmodified version of tsdx 0.14.0
. The whole file the error is happening look like this:
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>
);
}
I've also tried to configure Babel with the preset-react
but it doesn't change anything. Does someone have an idea what is going on here or how I can get a more explaining error message?