fix(ct): allow importing components from node_modules (#30493)

Fixes https://github.com/microsoft/playwright/issues/29854

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'});`);
   }
 

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);
+});