diff --git a/packages/playwright-ct-core/src/viteUtils.ts b/packages/playwright-ct-core/src/viteUtils.ts
index 505301c48e..a9f7020999 100644
--- a/packages/playwright-ct-core/src/viteUtils.ts
+++ b/packages/playwright-ct-core/src/viteUtils.ts
@@ -183,7 +183,7 @@ export function transformIndexFile(id: string, content: string, templateDir: str
lines.push(registerSource);
for (const value of importInfos.values()) {
- const importPath = resolveHook(value.filename, value.importSource);
+ const importPath = resolveHook(value.filename, value.importSource) || value.importSource;
lines.push(`const ${value.id} = () => import('${importPath?.replaceAll(path.sep, '/')}').then((mod) => mod.${value.remoteName || 'default'});`);
}
diff --git a/tests/playwright-test/playwright.ct-build.spec.ts b/tests/playwright-test/playwright.ct-build.spec.ts
index 0f8b1bdff6..a2a021b642 100644
--- a/tests/playwright-test/playwright.ct-build.spec.ts
+++ b/tests/playwright-test/playwright.ct-build.spec.ts
@@ -665,3 +665,33 @@ test('should pass undefined value as param', async ({ runInlineTest }) => {
expect(result.exitCode).toBe(0);
expect(result.passed).toBe(1);
});
+
+test('should resolve components imported from node_modules', async ({ runInlineTest }) => {
+ const result = await runInlineTest({
+ 'package.json': `{ "name": "test-project" }`,
+ 'playwright.config.ts': playwrightCtConfigText,
+ 'playwright/index.html': ``,
+ 'playwright/index.js': ``,
+
+ 'node_modules/@mui/material/index.js': `
+ const TextField = () => 'input';
+ module.exports = { TextField };
+ `,
+ 'node_modules/@mui/material/package.json': JSON.stringify({
+ name: '@mui/material',
+ main: './index.js',
+ }),
+
+ 'src/component.spec.tsx': `
+ import { test } from '@playwright/experimental-ct-react';
+ import { TextField } from '@mui/material';
+
+ test("passes", async ({ mount }) => {
+ await mount();
+ });
+ `,
+ }, { workers: 1 });
+
+ expect(result.exitCode).toBe(0);
+ expect(result.passed).toBe(1);
+});