<p dir="auto">This works on 1.25 for webkit but fails for versions after it.</p>
<p dir="auto">I have already asked about this before, but answer was vague and no further response was given.<br>
What I am asking here is a bit of clarification, and to know if this can be fixed or not, so my team can move forward (either exclude tests on webkit or try some other package like puppeteer or cypress) since we are already 3 versions behind on playwright.</p>
<p dir="auto">I have created this page.</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;script src=&quot;/main.js&quot; &gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;img src=&quot;https://via.placeholder.com/150&quot; alt=&quot;&quot; /&gt;
&lt;/body&gt;
&lt;/html&gt;"><pre class="notranslate"><span class="pl-c1">&lt;!DOCTYPE html<span class="pl-kos">&gt;</span></span>
<span class="pl-kos">&lt;</span><span class="pl-ent">html</span> <span class="pl-c1">lang</span>="<span class="pl-s">en</span>"<span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">head</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">meta</span> <span class="pl-c1">charset</span>="<span class="pl-s">UTF-8</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">meta</span> <span class="pl-c1">http-equiv</span>="<span class="pl-s">X-UA-Compatible</span>" <span class="pl-c1">content</span>="<span class="pl-s">IE=edge</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">meta</span> <span class="pl-c1">name</span>="<span class="pl-s">viewport</span>" <span class="pl-c1">content</span>="<span class="pl-s">width=device-width, initial-scale=1.0</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">title</span><span class="pl-kos">&gt;</span>Document<span class="pl-kos">&lt;/</span><span class="pl-ent">title</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">/main.js</span>" <span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">head</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">img</span> <span class="pl-c1">src</span>="<span class="pl-s">https://via.placeholder.com/150</span>" <span class="pl-c1">alt</span>="" /&gt;
<span class="pl-kos">&lt;/</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">html</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">I served it using vscode live server</p>
<p dir="auto">and I have this test</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=" test.only(&quot;google interceptor&quot;, async ({ page }) =&gt; {
        await page.route(/google/, () =&gt; {
            throw new Error(&quot;should never come here!&quot;);
        });
        await page.goto(&quot;http://127.0.0.1:5500/index.html&quot;);
        console.log(await page.evaluate(() =&gt; {
            return performance.getEntriesByType(&quot;resource&quot;);
        }));
    });"><pre class="notranslate"> <span class="pl-s1">test</span><span class="pl-kos">.</span><span class="pl-en">only</span><span class="pl-kos">(</span><span class="pl-s">"google interceptor"</span><span class="pl-kos">,</span> <span class="pl-k">async</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> page <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">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">route</span><span class="pl-kos">(</span><span class="pl-pds"><span class="pl-c1">/</span>google<span class="pl-c1">/</span></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">throw</span> <span class="pl-k">new</span> <span class="pl-smi">Error</span><span class="pl-kos">(</span><span class="pl-s">"should never come here!"</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-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">goto</span><span class="pl-kos">(</span><span class="pl-s">"http://127.0.0.1:5500/index.html"</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-s1">page</span><span class="pl-kos">.</span><span class="pl-en">evaluate</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">return</span> <span class="pl-s1">performance</span><span class="pl-kos">.</span><span class="pl-en">getEntriesByType</span><span class="pl-kos">(</span><span class="pl-s">"resource"</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><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">which I run using <code class="notranslate">@playwright/test</code> package.<br>
Basically what happens is that it yields duplicate entries for image in performance.getEntries().</p>
<p dir="auto">case 1: no route handler for /google/ and main.js on page -&gt; no duplicate entries in resource timings for image<br>
case 2: route handler for /google/ registered, no main.js in html -&gt; no duplicate entries in resource timings<br>
case 3: no route handler for /google/ registered, no main.js in html -&gt; no duplicate entries in resource timings<br>
case 4: route handler for /google./ registered, main.js in html -&gt; duplicate entries in resource timings for image</p>
<p dir="auto">there is not a single resource on the page that loads something from google, and main.js is completely empty (or it doesn't even exist, doesn't matter)  so there is nothing that would trigger duplicate load.<br>
From the test case above there is not even anything intercepted, because only route handler registered for <code class="notranslate">google</code> throws an error so it never comes to that line at all.</p>
<p dir="auto">I have tests where I need to have the route handlers, and I have scripts on the page, I can't change that, and those work well on firefox and chrome and worked well on previous playwright versions(1.25 ) webkit.</p>
<p dir="auto">I got a response that it is a preload request, I tried adding preload="none" to image tags and it still doesn't help.<br>
I am just trying to understand how to fix this, because it is breaking lots of our tests now.</p>
<p dir="auto">Basically what I don't understand here is what is the right behavior?<br>
Is webkit wrong to not report duplicate entries in case there is no route handler registered?<br>
Or is playwright wrong to exhibit such behavior of webkit when there is route handler registered and an empty script on the page?<br>
It looks inconsistent</p>
<p dir="auto">Does anyone have an idea on how to avoid these duplicate resource entries?<br>
Can we update playwright but somehow still run older webkit which does not show this behavior?</p>
<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: [v1.34]</li>
<li>Operating System: [Windows 10]</li>
<li>Browser: [All]</li>
</ul>
<h3 dir="auto">Source code</h3>
<p dir="auto"><strong>Link to the GitHub repository with the repro</strong></p>
<p dir="auto">Repro: <a href="https://github.com/alexandersorokin/playwright-bug-jsx">https://github.com/alexandersorokin/playwright-bug-jsx</a></p>
<p dir="auto">Or you can use default Playwright config with:</p>
<ol dir="auto">
<li><code class="notranslate">"type": "module"</code> in <code class="notranslate">package.json</code>.</li>
<li>Importing React component from <code class="notranslate">jsx</code>-file.</li>
<li>Using the component name in test.</li>
</ol>
<p dir="auto"><strong>Steps</strong></p>
<ul dir="auto">
<li>npm ci</li>
<li>npm run test</li>
</ul>
<p dir="auto"><strong>Expected</strong></p>
<p dir="auto">Test pass</p>
<p dir="auto"><strong>Actual</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="c:\playwright-bug-jsx&gt;npm run test                                                                                                                                                                                                         &gt; playwright-bug-jsx@1.0.0 test
&gt; playwright test --config ./playwright.config.ts                                                                                                                                                                                               

SyntaxError: Named export 'Fragment' not found. The requested module '@playwright/test/jsx-runtime' is a CommonJS module, which may not support all module.exports as named exports. 
CommonJS modules can always be imported via the default export, for example using:                                                                                                                                                              import pkg from '@playwright/test/jsx-runtime'; 
const { Fragment: _Fragment } = pkg;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
Error: No tests found                                                                                                                                                                                                                          "><pre class="notranslate"><code class="notranslate">c:\playwright-bug-jsx&gt;npm run test                                                                                                                                                                                                         &gt; playwright-bug-jsx@1.0.0 test
&gt; playwright test --config ./playwright.config.ts                                                                                                                                                                                               

SyntaxError: Named export 'Fragment' not found. The requested module '@playwright/test/jsx-runtime' is a CommonJS module, which may not support all module.exports as named exports. 
CommonJS modules can always be imported via the default export, for example using:                                                                                                                                                              import pkg from '@playwright/test/jsx-runtime'; 
const { Fragment: _Fragment } = pkg;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
Error: No tests found                                                                                                                                                                                                                          
</code></pre></div>
<p dir="auto">I suspect <a href="https://github.com/microsoft/playwright/pull/22827" data-hovercard-type="pull_request" data-hovercard-url="/microsoft/playwright/pull/22827/hovercard">this changes</a> to cause this behavior.</p>
<p dir="auto">Analysis:</p>
<ol dir="auto">
<li>The test passes in Playwright@1.33.0. So breaking changes was introduced in Playwright@1.34.0.</li>
<li>The test passes if "type" to "commonjs" is set in <code class="notranslate">package.json</code>. So only ES modules are affected.</li>
</ol>