<p dir="auto">Hello, I'd like to import some JSX files in my test files. My use case is to import test helpers from my main codebase. Those include JSX code.</p>
<p dir="auto">Right now, when I import those files, I get this kind of errors:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="SyntaxError: Unexpected token '&lt;'"><pre class="notranslate"><code class="notranslate">SyntaxError: Unexpected token '&lt;'
</code></pre></div>
<p dir="auto">Is there a simple way to add JSX support to <code class="notranslate">playwright test</code>?</p>
<p dir="auto"><strong>Context:</strong></p>
<ul dir="auto">
<li>Playwright Version: 1.28.1</li>
<li>Operating System: Mac</li>
<li>Node.js version: v16.16.0</li>
<li>Browser: All</li>
<li>Extra: Typescript Monorepo</li>
</ul>
<p dir="auto"><strong>Code Snippet</strong></p>
<p dir="auto">Here is an example repo which demonstrates the issue<br>
<a href="https://github.com/rubber-duck-software/playwright-typescript-monorepo-tsx">https://github.com/rubber-duck-software/playwright-typescript-monorepo-tsx</a></p>
<p dir="auto"><strong>Describe the bug</strong></p>
<p dir="auto">This is a followup to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1403540941" data-permission-text="Title is private" data-url="https://github.com/microsoft/playwright/issues/17964" data-hovercard-type="issue" data-hovercard-url="/microsoft/playwright/issues/17964/hovercard" href="https://github.com/microsoft/playwright/issues/17964">#17964</a>. Playwright can now do the jsx transform in general, but it cannot handle jsx fragments. As far as I can tell <code class="notranslate">babel-plugin-syntax-jsx</code> does support fragments, so I am not sure about the underlying cause of this issue.</p>