[BUG] Cannot rerun react component test using in UI

[mpochron]

System info

• Playwright Version: [v1.XX]: 1.32.3
• Operating System: [All, Windows 11, Ubuntu 20, macOS 13.2, etc.]: Windows 10
• Browser: [All, Chromium, Firefox, WebKit]: Chromium
• Other info:

Source code

• [ ] I provided exact source code that allows reproducing the issue locally.

Link to the GitHub repository with the repro

[https://github.com/your_profile/playwright_issue_title]

or

Config file

// playwright-ct.config.ts
// @ts-check
import { defineConfig, devices } from '@playwright/experimental-ct-react';
import { resolve } from "path";

/**
 * @see https://playwright.dev/docs/test-configuration
 */
module.exports = defineConfig({
  retries: 1,
  testDir: './tests/component',
  timeout: 30 * 1000,
  // fullyParallel: true,
  use: {
    trace: 'on-first-retry',
    ctPort: 3100,
    ctViteConfig: {
      resolve: {
        alias: {
          '@': resolve(__dirname, './src'),
          '@/*': resolve(__dirname, './src'),
        }
      }
    }
  },
  /* Configure projects for major browsers */
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] }
    },
  ]
});

Test file (self-contained)

it('should check the box using setChecked', async ({ page }) => {
  await page.setContent(`<input id='checkbox' type='checkbox'></input>`);
  await page.getByRole('checkbox').check();
  await expect(page.getByRole('checkbox')).toBeChecked();
});

Steps

• execute command cross-env PW_EXPERIMENTAL_TS_ESM=1 playwright test --ui -c playwright-ct.config.ts
• run specific one test on left side from UI
• wait for complete test
• rerun this test again
• i am getting error below

Expected

Should be able to rerun same test in UI.

Actual

Since I opened GUI, first test always gets working, but every time after first attempt I am being blocked by below error:

vite v4.2.2 building for production...
transforming (1) playwright\index.htmlError when using sourcemap for reporting an error: Can't resolve original location of error.
✓ 3 modules transformed.
✓ built in 67ms
Identifier '__pwReact' has already been declared (Note that you need plugins to import files that are not JavaScript)
file: C:/dev/tester/frontend/playwright/index.ts:139:12
137: // This file is injected into the registry as text, no dependencies are allowed.
138: 
139: import * as __pwReact from 'react';
                 ^
140: import { createRoot as __pwCreateRoot } from 'react-dom/client';
RollupError: Identifier '__pwReact' has already been declared (Note that you need plugins to import files that are not JavaScript)

    at error (C:\dev\tester\frontend\node_modules\vite\node_modules\rollup\dist\es\shared\node-entry.js:2125:30)
    at Module.error (C:\dev\tester\frontend\node_modules\vite\node_modules\rollup\dist\es\shared\node-entry.js:13334:16)
    at Module.tryParse (C:\dev\tester\frontend\node_modules\vite\node_modules\rollup\dist\es\shared\node-entry.js:14011:25)
    at Module.setSource (C:\dev\tester\frontend\node_modules\vite\node_modules\rollup\dist\es\shared\node-entry.js:13621:39)
    at ModuleLoader.addModuleSource (C:\dev\tester\frontend\node_modules\vite\node_modules\rollup\dist\es\shared\node-entry.js:23586:20)
RollupError: Identifier '__pwReact' has already been declared (Note that you need plugins to import files that are not JavaScript)
    at error (C:\dev\tester\frontend\node_modules\vite\node_modules\rollup\dist\es\shared\node-entry.js:2125:30)
    at Module.error (C:\dev\tester\frontend\node_modules\vite\node_modules\rollup\dist\es\shared\node-entry.js:13334:16)
    at Module.tryParse (C:\dev\tester\frontend\node_modules\vite\node_modules\rollup\dist\es\shared\node-entry.js:14011:25)
    at Module.setSource (C:\dev\tester\frontend\node_modules\vite\node_modules\rollup\dist\es\shared\node-entry.js:13621:39)
    at ModuleLoader.addModuleSource (C:\dev\tester\frontend\node_modules\vite\node_modules\rollup\dist\es\shared\node-entry.js:23586:20)

[pavelfeldman]

I can't reproduce this. Could you follow the issue template in the new issue and share something we could reproduce locally?

[vandriesh]

if it can help I get this everytime after I change the code (btw, watch mode doesn't "watch" the code);

1. start the test;
2. change the test - notice the "watching"
3. change the code (e.g. the component) - btw it's in component mode (so far only for that using playwright)
4. notice - no reaction - have to click run again - boom:

not sure "who" should watch - pw - and tell vite/rollup to rebundle , vite (in watch mode) and tell playwright : hey the code is ready , could you please run one more time?

using macOS Catalina: 10.15.7 @playwright/experimental-ct-react17@1.37.0 "vite": "4.4.9", chrome browser