[Question] Typescript Monorepo Tsx Issue

I am getting the following error:

SyntaxError: Unexpected token '<'

Because, deep in my test’s dependency tree, I import a tsx file. Any workaround for this would be awesome, because this error is currently blocking adoption.

More details on my project setup below:

We are looking to adopt playwright for e2e testing one of our sites. The site is located in a typescript monorepo. Some packages in the typescript monorepo are only used internally, and so are not compiled. One of these packages is our “core” package in which we locate all of our core business logic. This package handles database interactions, sending email, accepting payments, etc. All use case logic is in the “core” package. Our strategy for authoring html emails is to use react, giving us reusable components for all our emails. So, deep in the “core” package, we import jsx/tsx files.

Since the core package also handles database interactions, it exposes a set of functions used to seed data, like SeedFoo, and SeedBar. These seed functions are called before some end to end tests to provide the appropriate data state for the site.

So, our tests import core and core contains tsx files, causing the error above.

Is there any workaround to allow playwright tests to import tsx files (even indirectly)? In not, is this on the roadmap at some point?

Note: We are not using component testing at this time. We are not trying to import these components in the context of component testing. And we cannot have these email related react components subject to same limitations as component testing (ie no react fragments).

Any help people can offer would be greatly appreciated.

Thank you! 😃

[rubber-duck-software]

I think we have a different understanding of the typescript compiler and its role in the larger ecosystem.

From the typescript docs here

TypeScript supports embedding, type checking, and compiling JSX directly to JavaScript.

I believe the JSX transform is a special case in the JS transpilation ecosystem since typescript supports it natively (without webpack / babel, rollup / esbuild, etc). Further, since JSX is just transformed into Javascript, it can execute correctly in Node.js, not just in the browser.

As for other tools which support Node.js TSX, this isn’t something that I think of tools explicitly supporting. This is done simply with a typescript compilation. On our backend, we use tsx files in Node.js, run with ts-node using swc as our compiler. Currently, we have use cypress for e2e testing and these tsx files are imported into cypress tasks (run Node.js in cypress).

My interpretation of this is that playwright’s support for typescript is incomplete since typescript will transform JSX but playwright cannot. I have very little experience with playwright and certainly don’t understand how it works internally. Any help you could provide (or any correction you can offer) would be welcome.

Thank you!

[rubber-duck-software]

Wow! Thanks much for looking at this, that’s really great! I’m super excited to get to use playwright on this project going forward.

Thanks for your attention on this issue. Looking forward to 1.28!