<p dir="auto">When creating a default Vite project with TypeScript, importing local modules does not work.<br>
Below is a simple example when installing Vite, then Playwright, and adding an import to the test file. cause a 'Cannot find module' error. No tests are found in this case by the runner.</p>
<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: [1.32.2]</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><br>
<a href="https://github.com/apisarev/pw-test">https://github.com/apisarev/pw-test</a></p>
<p dir="auto"><strong>Steps</strong></p>
<p dir="auto">Run <code class="notranslate">npx playwright test</code> with the repo</p>
<p dir="auto">OR</p>
<ol dir="auto">
<li><code class="notranslate">npm create vite@latest pw-test -- --template vanilla-ts</code></li>
<li><code class="notranslate">cd pw-test</code></li>
<li><code class="notranslate">npm install</code></li>
<li><code class="notranslate">npm init playwright@latest</code>  // With default parameters</li>
<li><code class="notranslate">npx playwright tes</code>t // All good</li>
<li>Add file tests/utisl.ts: <code class="notranslate">export const testValue = 1;</code></li>
<li>import and use it in tests/example.spec.ts:</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import { test, expect } from '@playwright/test';
import { testValue } from './utils';

test('has title', async ({ page }) =&gt; {
  console.log(testValue);
  // the rest of the code"><pre class="notranslate"><code class="notranslate">import { test, expect } from '@playwright/test';
import { testValue } from './utils';

test('has title', async ({ page }) =&gt; {
  console.log(testValue);
  // the rest of the code
</code></pre></div>
<ol start="8" dir="auto">
<li><code class="notranslate">npx playwright test</code></li>
</ol>
<p dir="auto"><strong>Expected</strong></p>
<p dir="auto">Running 6 tests using 4 workers<br>
6 passed</p>
<p dir="auto"><strong>Actual</strong></p>
<p dir="auto">Cannot find module '...\pw-test\tests\utils'<br>
Error: No tests found</p>
<p dir="auto"><strong>Context:</strong></p>
<ul dir="auto">
<li>SvelteKit 1.0</li>
<li>Windows 11</li>
<li>Playwright 1.28.1 (comes with SvelteKit 1.0)</li>
</ul>
<h1 dir="auto">Code Snippet</h1>
<p dir="auto"><strong>tests/tests.ts</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { expect, test } from '@playwright/test';
import { my_module } from './utils';

test('index page has expected h1', async ({ page }) =&gt; {
	console.log(my_module);
	await page.goto('/');
	expect(await page.textContent('h1')).toBe('Welcome to SvelteKit');
});"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">expect</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-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">my_module</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./utils'</span><span class="pl-kos">;</span>

<span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-s">'index page has expected h1'</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-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">my_module</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">'/'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
	<span class="pl-en">expect</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">textContent</span><span class="pl-kos">(</span><span class="pl-s">'h1'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toBe</span><span class="pl-kos">(</span><span class="pl-s">'Welcome to SvelteKit'</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>tests/utils.ts</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export const my_module = 'testing buddy!';"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-s1">my_module</span> <span class="pl-c1">=</span> <span class="pl-s">'testing buddy!'</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Describe the bug</strong></p>
<p dir="auto">I run <code class="notranslate">npm run test</code> and I get this error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Error: Cannot find module 'C:\web projects\testing-import\tests\utils' 
imported from C:\web projects\testing-import\tests\test.ts"><pre class="notranslate"><code class="notranslate">Error: Cannot find module 'C:\web projects\testing-import\tests\utils' 
imported from C:\web projects\testing-import\tests\test.ts
</code></pre></div>
<p dir="auto">This is a brand new SvelteKit project with Playwright. All I did was add those two files. I created a repo regardless:</p>
<p dir="auto"><a href="https://github.com/jdgamble555/testing-import">https://github.com/jdgamble555/testing-import</a></p>
<p dir="auto">Playwright is supposed to support Typescript <a href="https://playwright.dev/docs/test-typescript" rel="nofollow">out-of-the-box</a>.</p>
<p dir="auto">How can I get a basic TS import working?</p>
<p dir="auto">J</p>
<hr>
<p dir="auto">I also am not using any fancy TS Module alias etc... just basic importing.</p>