[Bug]: Playwright CT 1.42.0 throws Vite/Rollup error when testing MUI TextField component

[bethmaloney]

Version

1.42.0

Steps to reproduce

1. Install MUI

2. Create the below test

import { test } from "@playwright/experimental-ct-react";
import { TextField } from "@mui/material";

test("this test causes vite/rollup failure", async ({ mount }) => {
    await mount(<TextField />);
  });

3. Run npm run test-ct

Expected behavior

Test builds and executes

Actual behavior

Build fails with below output

> [email protected] test-ct
> playwright test -c playwright-ct.config.ts


Running 6 tests using 6 workers

vite v5.1.5 building for production...
✓ 3 modules transformed.
Error: [vite]: Rollup failed to resolve import "undefined" from "C:/Users/xxxx/source/repos/playwright-ct-example/playwright/index.tsx".                                                            
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

    at viteWarn (C:\Users\xxxx\source\repos\playwright-ct-example\node_modules\vite\dist\node\chunks\dep-G-px366b.js:67108:27)
    at onwarn (C:\Users\xxxx\source\repos\playwright-ct-example\node_modules\@vitejs\plugin-react\dist\index.mjs:250:9)
    at onRollupWarning (C:\Users\xxxx\source\repos\playwright-ct-example\node_modules\vite\dist\node\chunks\dep-G-px366b.js:67133:9)
    at onwarn (C:\Users\xxxx\source\repos\playwright-ct-example\node_modules\vite\dist\node\chunks\dep-G-px366b.js:66840:13)
    at C:\Users\xxxx\source\repos\playwright-ct-example\node_modules\rollup\dist\es\shared\node-entry.js:18300:13
    at Object.logger (C:\Users\xxxx\source\repos\playwright-ct-example\node_modules\rollup\dist\es\shared\node-entry.js:19957:9)
    at ModuleLoader.handleInvalidResolvedId (C:\Users\xxxx\source\repos\playwright-ct-example\node_modules\rollup\dist\es\shared\node-entry.js:18901:26)
    at ModuleLoader.resolveDynamicImport (C:\Users\xxxx\source\repos\playwright-ct-example\node_modules\rollup\dist\es\shared\node-entry.js:18959:58)
    at C:\Users\xxxx\source\repos\playwright-ct-example\node_modules\rollup\dist\es\shared\node-entry.js:18846:32
  6 did not run

Additional context

This was previously working in 1.41.2 and started failing at 1.42.0.

Build succeeds if the TextField is used in another component and that component is tested. EG

import "./App.css";
import { TextField } from "@mui/material";

function App() {
  return <TextField />;
}

export default App;

test("this test works", async ({ mount }) => {
  await mount(<App />);
});

While the build process succeeds it does report the following errors

node_modules/@mui/material/styles/index.js (1:0) Error when using sourcemap for reporting an error: Can't resolve original location of error.
node_modules/@mui/material/utils/index.js (1:0) Error when using sourcemap for reporting an error: Can't resolve original location of error.
node_modules/@mui/material/AccordionActions/AccordionActions.js (1:0) Error when using sourcemap for reporting an error: Can't resolve original location of error.

(happy to create a separate bug report for the above errors)

I have attached an example project showing this error playwright-ct-example.zip

Please let me know if you need anything else.

Environment

System:
    OS: Windows 11 10.0.22631
    CPU: (20) x64 13th Gen Intel(R) Core(TM) i7-13700H
    Memory: 12.99 GB / 31.69 GB
  Binaries:
    Node: 18.19.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 3.6.1 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.4 - C:\Program Files\nodejs\pnpm.CMD
  IDEs:
    VSCode: 1.87.0 - C:\Users\BethMaloney\AppData\Local\Programs\Microsoft VS Code\bin\code.CMD
  Languages:
    Bash: 5.1.16 - C:\Windows\system32\bash.EXE
  npmPackages:
    @playwright/experimental-ct-react: ^1.42.1 => 1.42.1
    @playwright/test: ^1.42.1 => 1.42.1

[dgozman]

I can repro. The problem is this call returns undefined when given specifier: '@mui/material', and so we generate the following into index.tsx:

const _mui_material_TextField = () => import('undefined').then((mod) => mod.TextField);
__pwRegistry.initialize({ _mui_material_TextField });

[fernandojbf]

I can see a problem in my project that seems related to this.

Error: [vite]: Rollup failed to resolve import "undefined" from "/app/automation/playwright/index.tsx".

[emmaguo13]

Hi, I'm getting a similar error:

Error: [vite]: Rollup failed to resolve import "file-loader?name=react-pdf-v2-[contenthash].[ext]!pdfjs-dist/legacy/build/pdf.worker" from "[root file path]/node_modules/react-pdf/dist/esm/entry.webpack.js". This is most likely unintended because it can break your application at runtime. If you do want to externalize this module explicitly add it to build.rollupOptions.external

I tried adding "file-loader?name=react-pdf-v2-[contenthash].[ext]!pdfjs-dist/legacy/build/pdf.worker" to build.rollupOptions.external in my playwright config, but that gives me a javascript heap out of memory error.