Strange unexpected token error

[openscript]

Hello everybody

I'm using tsdx for a little React component library. It worked great so far, but I ran into a strange error in this file:

$ tsdx build
✓ Creating entry file 2.5 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

The code seems to be valid and also Storybook doesn't have a problem with it. The whole project can be found here.

Do I need to configure something for babel? Does someone have an idea what is going on here?

Thank you in advance :)

[agilgur5]

So usually an unexpected token error means there was a faulty transform somewhere that caused buggy output which later could not be parsed.

Off the top of my head, there are two related issues I can guess at.

1. @emotion/babel-preset-css-prop not working with .tsx files #710 is one with regard to Emotion JSX. Emotion recently changed to the new JSX transform (c.f. React 17 + new JSX transform + JSX pragma/pragmaFrag emotion-js/emotion#2041) so maybe that's causing some hiccups and an older version might work. But it doesn't seem like you're using a Babel transform at all 🤔
   It seems like the Babel transform is optional now per the docs but could try importing @emotion/styled/macro instead, not really sure.

2. UMD format with lodash breaks due to lodash-es substitution #759 (comment) has a similar error due to issues with @rollup/plugin-commonjs, but it is a different error. That one should be resolved with Update to Rollup 2 #889 , which you could also try using by installing via branch.
   ("Error: 'return' outside of function" with async/await #869 etc were also similar errors with async/await prior to v0.14.0 due to faulty output of the async-to-promises Babel plugin, but those are also different errors and were resolved by Use regenerator instead of async-to-promises to transpile async functions #795)

Some other things I might try to troubleshoot would be falling back to React 16 (due to #918) or TS 3.9 (due to #926)

[openscript]

Thank you @agilgur5 for taking the time and responding me.

I've found out that this issue started to occur as soon as I changed "rootDir": "./src" to "rootDirs": ["./src", "./stories"], within my tsconfig.json. I don't know why this causes the problem. Unfortunately I want to use rootDirs so VSCode properly inspect my stories.

Do you have any idea what's the issue here?