[Bug]: Lucide-react icons cannot be passed as component references in Playwright Component Tests for Vite project

[JayCodist]

Version

1.58.0

Steps to reproduce

1. Clone my repo at https://github.com/JayCodist/playwright-lucide-repro
2. Run npm install
3. Run npm run test:update

Expected behavior

I expected to be able to successfully pass lucide-react icons as component references inside of test spec files

Actual behavior

The test spec that tries to pass lucide-react icons as component references fails with a timeout, and the others succeed. When using Playwright Component Testing with React, passing lucide-react icon components as props to other components fails to render, while instantiating the icons as JSX in the test file works correctly.

Passing icon component reference (fails)

Component being tested (Card.tsx):

import { LucideIcon } from 'lucide-react'

type CardProps = {
  header?: {
    title: string
    icon?: LucideIcon
  }
}

export const Card = ({ header }: CardProps) => {
  const Icon = header?.icon
  return (
    <div>
      {Icon && <Icon className='size-4' />}
      <h2>{header?.title}</h2>
    </div>
  )
}

Test file (card.spec.tsx)

import { test, expect } from '@playwright/experimental-ct-react'
import { ScanSearch } from 'lucide-react'
import { Card } from './card'

test('renders card with icon', async ({ mount }) => {
  const component = await mount(
    <Card header={{ title: 'Test', icon: ScanSearch }} /> // Passing icon: <ScanSearch /> works
  )
  
  await component.getByText('Test').waitFor({ state: 'visible' })
})

Additional context

This only affects lucide-react icons passed as component references
Instantiating icons as JSX directly in the test file works fine (e.g., <Check size={16} />)
The issue appears to be related to module resolution when component references cross the test file → component file boundary
Other React component references passed as props work correctly
This may be specific to ESM-only packages like lucide-react

My current workaround is to create a separate fixture file (not **.spec.tsx) that goes through Vite's build process, where the lucide icon components can be imported and passed to other components. This fixture file is then imported in the test file.

Is this expected behavior for Playwright CT, or is there a way to properly configure module resolution to support this pattern?

Environment

System:
  OS: macOS 26.2
  CPU: (12) arm64 Apple M3 Pro
  Memory: 712.25 MB / 36.00 GB
Binaries:
  Node: 22.21.1 - /Users/johnson/.nvm/versions/node/v22.21.1/bin/node
  Yarn: 1.22.22 - /Users/johnson/.nvm/versions/node/v22.21.1/bin/yarn
  npm: 10.9.4 - /Users/johnson/.nvm/versions/node/v22.21.1/bin/npm
Languages:
  Bash: 3.2.57 - /bin/bash
npmPackages:
  @playwright/experimental-ct-react: ^1.58.0 => 1.58.0 

- Build tool: Vite (7.3.1)
- Framework: React + TypeScript (React 19.2.4)
- Icon library: `lucide-react` (0.563.0)