[Bug]: experimental-ct-react with FluentUI fails on TypeError: Runtime.jsxs is not a function

[krystofmatejka]

Version

1.50.1

Steps to reproduce

1. Clone https://github.com/krystofmatejka/playwright-ct-fluentui-bug
2. npm i
3. npm run test:component

Expected behavior

I made two components, TextComponent that renders only text and ButtonComponent that imports Button component from @fluentui/react-components.

I expect that the button test will work.

Actual behavior

It only shows a white screen. The console says TypeError: Runtime.jsxs is not a function.

TextComponent works as expected, only ButtonComponent fails.

Additional context

The issue only occurs in @playwright/experimental-ct-react, it works fine in @playwright/test or on the web.

Feel free to reach out, I'm willing to help investigate.

Environment

System:
    OS: Windows 11 10.0.26100
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12800H
    Memory: 31.72 GB / 63.67 GB
  Binaries:
    Node: 20.12.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
    bun: 1.1.15 - ~\.bun\bin\bun.EXE
  IDEs:
    VSCode: 1.97.2 - C:\Users\kmatejka\AppData\Local\Programs\Microsoft VS Code\bin\code.CMD
  Languages:
    Bash: 5.1.16 - C:\WINDOWS\system32\bash.EXE

[chrisflem]

Any news on this ?

[agg23]

After looking into this twice, it's not readily apparent what the issue is. Vite is clearly emitting { default: { jsxs: ..., ... } } as the react/jsx-runtime export, but Fluent expects to be able to use a wildcard import import * as ReactRuntime from 'react/jsx-runtime'. While we do customize JSX generation in the standard test environment, this is specifically through Component Testing, which is solely using Vite to build.

Fluent uses Playwright for their own testing (though perhaps not with Component Testing?) and the popularity of Fluent and Playwright makes me very surprised that no one has raised this issue before.

---

Separately, Component Testing is currently undergoing internal evaluation on how we move forward. There may be more significant investments in the future that will hopefully solve this issue.