[Bug]: Rollup failed to resolve import "/playwright/index.ts" from "/myrepo/playwright/index.html"

[hklsiteimprove]

Version

1.43.1

Steps to reproduce

1. run npm init playwright@latest -- --ct
2. Add src/app.tsx file:

import * as React from 'react';
import './App.css';

const logo = require('./logo.svg');

function App() {
  return (
    <div className="App">
      <div className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h2>Welcome to React</h2>
      </div>
      <p className="App-intro">
        To get started, edit <code>src/App.tsx</code> and save to reload.
      </p>
    </div>
  );
}

export default App;

3. Add src/app.spec.tsx:

import { test, expect } from '@playwright/experimental-ct-react';
import App from './app';

test.use({ viewport: { width: 500, height: 500 } });

test('should work', async ({ mount }) => {
  const component = await mount(<App />);
  await expect(component).toContainText('Learn React');
});

4. Run npm run test-ct

Expected behavior

Described in #30565

Actual behavior

Described in #30565

Additional context

No response

Environment

Described in https://github.com/microsoft/playwright/issues/30565

[mxschmitt]

I'm not able to repro, but had to do a few additional steps:

• remove svg import
• remove css import
• install react/react-dom

Could you execute the following?

npm ls playwright-core
npm ls vite

For me it gives this:

➜  ctreactrepro npm ls vite
ctreactrepro@1.0.0 /Users/maxschmitt/Developer/tmp/ctreactrepro
└─┬ @playwright/experimental-ct-react@1.44.0
  ├─┬ @playwright/experimental-ct-core@1.44.0
  │ └── vite@5.2.11
  └─┬ @vitejs/plugin-react@4.2.1
    └── vite@5.2.11 deduped

➜  ctreactrepro npm ls playwright-core
ctreactrepro@1.0.0 /Users/maxschmitt/Developer/tmp/ctreactrepro
└─┬ @playwright/experimental-ct-react@1.44.0
  └─┬ @playwright/experimental-ct-core@1.44.0
    ├── playwright-core@1.44.0
    └─┬ playwright@1.44.0
      └── playwright-core@1.44.0 deduped

➜  ctreactrepro 

[hklsiteimprove]

I get the following output:

➜  playwright-repro npm ls playwright-core
playwright-repro@1.0.0 /Users/hkl/git/playwright-repro
└─┬ @playwright/experimental-ct-react@1.44.0
  └─┬ @playwright/experimental-ct-core@1.44.0
    ├── playwright-core@1.44.0
    └─┬ playwright@1.44.0
      └── playwright-core@1.44.0 deduped

➜  playwright-repro npm ls vite
playwright-repro@1.0.0 /Users/hkl/git/playwright-repro
└─┬ @playwright/experimental-ct-react@1.44.0
  ├─┬ @playwright/experimental-ct-core@1.44.0
  │ └── vite@5.2.11
  └─┬ @vitejs/plugin-react@4.2.1
    └── vite@5.2.11 deduped

So it looks similar to yours.
Does it make a difference I am on a mac M1?

[hklsiteimprove]

@mxschmitt And just to verify, if I downgrade the playwright version to 1.40.0 it works (with the small note that I get a react/react-dom not installed error, and after the steps you listed it works as expected on 1.40.0)

[mxschmitt]

Would it be possible to share a small project with us which reproduces the error? Which we can clone and run locally?

[hklsiteimprove]

@mxschmitt Now something strange happend.

In my repro project, where I managed to get the error it suddenly started working again.
What I get now is something different.

When I npm i and npm run test-ct with only playwright ct package 1.44.0 installed it fails with the error above, then I install react and react-dom and it works as expected. This is not what I saw yesterday.
I will try in my main project now too

[mxschmitt]

Maybe a caching issue? Could you try to delete the playwright/.cache folder?

[hklsiteimprove]

It wasn't caching since it ran in a github actions workflow, and those are not using cache.
But now it works, after chaning it to ./playwright/index.tsx in the html file