<p dir="auto"><strong>Context:</strong></p>
<ul dir="auto">
<li>Playwright Version: 1.30.0</li>
<li>OS: macOS 13.0.1</li>
<li>Memory: 216.70 MB / 16.00 GB</li>
<li>Node: 18.13.0 - ~/.nix-profile/bin/node</li>
<li>Yarn: 1.22.19 - ~/.nix-profile/bin/yarn</li>
<li>npm: 8.19.3 - ~/.nix-profile/bin/npm</li>
<li>Bash: 3.2.57 - /bin/bash</li>
</ul>

<p dir="auto"><strong>Code Snippet</strong></p>
<p dir="auto">Help us help you! Put down a short code snippet that illustrates your bug and<br>
that we can run and debug locally. For example:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  const getPort = (await import(&quot;get-port&quot;)).default;"><pre class="notranslate">  <span class="pl-k">const</span> <span class="pl-s1">getPort</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-k">await</span> <span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">"get-port"</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">default</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Describe the bug</strong></p>
<p dir="auto">I'm trying to import an ES module without converting everything to ESM. This is possible by using a dynamic import, as TS helpfully points outs when I'm trying to run the test. But it doesn't work, because I'm assuming the default TS config doesn't have <code class="notranslate">module: nodenext</code>.</p>
<p dir="auto">The docs tell me that adding a <code class="notranslate">tsconfig.json</code> won't help as Playwright only cares about <code class="notranslate">paths</code> and <code class="notranslate">basePath</code> options. Is there a way to support importing ES modules non-invasively, or should I consider manually compiling the tests? (This affect a lot of packages since many npm package maintainers switched to supporting only ESM.)</p>
<p dir="auto"><strong>Context:</strong></p>
<ul dir="auto">
<li>Playwright Version: 1.25.1</li>
<li>Operating System: MacOs</li>
<li>Node.js version: v16.17.0</li>
</ul>


<p dir="auto"><strong>Code Snippet</strong></p>
<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { test } from &quot;@playwright/test&quot;;

test(&quot;dynamic import of ESM&quot;, async ({}) =&gt; {
  const { default: getPort } = await import(&quot;get-port&quot;);
  console.log(await getPort());
});"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">test</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"@playwright/test"</span><span class="pl-kos">;</span>

<span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-s">"dynamic import of ESM"</span><span class="pl-kos">,</span> <span class="pl-k">async</span> <span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-kos">{</span> <span class="pl-c1">default</span>: <span class="pl-s1">getPort</span> <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">"get-port"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-k">await</span> <span class="pl-en">getPort</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Describe the bug</strong></p>
<p dir="auto">From the <a href="https://nodejs.org/api/esm.html#import-expressions" rel="nofollow">node.js docs</a></p>
<blockquote>
<p dir="auto"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import" rel="nofollow">Dynamic import()</a> is supported in both CommonJS and ES modules. In CommonJS modules it can be used to load ES modules.</p>
</blockquote>
<p dir="auto">Yet, trying to load an ESM only package like <code class="notranslate">get-port</code> with a dynamic import statement fails with the error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Error [ERR_REQUIRE_ESM]: require() of ES Module .../node_modules/get-port/index.js from .../tests/example.spec.ts not supported.
    Instead change the require of index.js in .../tests/example.spec.ts to a dynamic import() which is available in all CommonJS modules."><pre class="notranslate"><code class="notranslate">Error [ERR_REQUIRE_ESM]: require() of ES Module .../node_modules/get-port/index.js from .../tests/example.spec.ts not supported.
    Instead change the require of index.js in .../tests/example.spec.ts to a dynamic import() which is available in all CommonJS modules.
</code></pre></div>
<p dir="auto">It's complaining I'm trying to use <code class="notranslate">require</code> to load an ESM only module, but as can be seen in the snippet, it's an <code class="notranslate">import()</code>.</p>