From e91d372544b4509623250e53d63e86ee830c5dbf Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Wed, 24 Apr 2024 12:32:28 -0700
Subject: [PATCH] fix(ct): allow importing components from node_modules
 (#30493)

Fixes https://github.com/microsoft/playwright/issues/29854
---
 packages/playwright-ct-core/src/viteUtils.ts  |  2 +-
 .../playwright.ct-build.spec.ts               | 30 +++++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

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': `<script type="module" src="./index.js"></script>`,
+    '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(<TextField />);
+      });
+    `,
+  }, { workers: 1 });
+
+  expect(result.exitCode).toBe(0);
+  expect(result.passed).toBe(1);
+});