Add Bun support

[Jarred-Sumner]

Fixes #27139

This adds a package.json "exports" condition for Bun which always chooses the CommonJS version of the module (for both ESM & CJS).

The built version of playwright uses __esModule to tell bundlers the code was ESM transplied into CommonJS. Bun supports this both at runtime and when using the bundler, but Node.js does not support this at runtime and that causes a compatibility issue when importing @playwright/test. It's unfortunately a compatibility issue whether or not we support __esModule, because choosing to not support it breaks libraries which otherwise only work when using a bundler.

Since Bun automatically converts CommonJS <> ESM and module.exports with dynamic properties are supported, we can choose to always use the CommonJS entry point for Playwright in Bun.

There were other changes necessary to get Playwright to work, which are mostly in oven-sh/bun#7958. After this PR, the remaining blocker for using Playwright in Bun is a stability issue when multiple workers are in use, which we are working on fixing.

[github-actions]

Test results for "tests 1"

2 flaky

⚠️ [chromium] › library/tracing.spec.ts:243:5 › should not include trace resources from the previous chunks
⚠️ [chromium] › library/tracing.spec.ts:243:5 › should not include trace resources from the previous chunks

14894 passed, 307 skipped
✔️✔️✔️

Merge workflow run.

[nektro]

the remaining blocker for using Playwright in Bun is a stability issue when multiple workers are in use

fixed!

[pavelfeldman]

Trying to understand the core of the issue. Wouldn't this be a problem for any compiled library that exports both CJS and ESM variants? I.e. shouldn't this be addressed on the Bun side for Node interoperability?

[jdalton]

Related to #7328.

Instead of tweaking the configs. What if we just remove:

playwright/packages/playwright/test.js

Line 24 in 4b99d21

Object.defineProperty(combinedExports, '__esModule', { value: true });

It was added as part of #7328 to work with
https://www.typescriptlang.org/tsconfig#esModuleInterop but it may not be needed (could be an extra bit thrown in)

[jdalton]

Update

I tested the one line removal against the lastest playwright tag v1.40.1 and of the 9,874 browser tests and 1,291 playwright tests only a baker's dozen 🍞 of flapper test fails appeared so removing

Object.defineProperty(combinedExports, '__esModule', { value: true });

from packages/playwright/test.js#L24 looks like an option 🙌 🤠

From the playwright init example:

And with multiple workers:

[pavelfeldman]

@jdalton that's a nice finding. This line predates our ESM support and I don't see why we would need it today. I'll run all the bots w/o this line.

This breakage still suggests that there is an interoperability problem for Bun vs Node, not sure how important it is to the Bun folks though.

[jdalton]

@pavelfeldman

that's a nice finding. This line predates our ESM support and I don't see why we would need it today. I'll run all the bots w/o this line.

Awesome! 🕺

This breakage still suggests that there is an interoperability problem for Bun vs Node, not sure how important it is to the Bun folks though.

This breakage is related to

Object.defineProperty(combinedExports, '__esModule', { value: true }); 

The issue is by design though the heuristic when to respect the __esModule annotation can totally be tweaked (I'm looking into it - new 🫓 core here!). The issue (simplified) is that Bun will try to respect the __esModule annotation. So when a CJS module has that it will treat it more like an ESM export having the module.exports properties treated as the specifiers. So when this CJS module was imported into another ESM module instead of the module.exports being treated as the default it was spread across as specifiers.

[pavelfeldman]

One test failed for us without it:

import t from '@playwright/test';
t('passed', () => {
  t.expect(1 + 1).toBe(2);
});

We compile Playwright using Babel. We also transpile TS tests on the fly using Babel. The Babel-to-babel interop works for us out of the box via __esModule:

// https://babeljs.io/docs/babel-plugin-transform-modules-commonjs#strict
Object.defineProperty(combinedExports, '__esModule', { value: true });

and

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

on the importing side.

In case of Bun, it takes over the transpilation of TS, so it seems like we need to align on the convention we are using. If Bun acts as Babel and trusts __esModule to already have default baked in, things should just work (tm).

---

Side note:
Playwright assumes it performs the TS(X) transpilation, which does not happen with Bun - bun takes care of it on its own. Assumptions about the transpilation between Bun and Playwright will differ, so some things won't work. At least component testing (TSX transform) and watch mode (compilation cache) won't work. Most of it is probably fixable though if we take it one step at a time.

[pavelfeldman]

I landed #28935, could you confirm it addresses your scenario?

[mxschmitt]

This should work once microsoft/create-playwright#108 has been landed and released: It was otherwise using npx/npm internally.

bun create playwright --next buntest
cd buntest
bun --bun x playwright install --with-deps
bun --bun x playwright test

Sometimes getting Error: worker process exited unexpectedly (code=0, signal=null) which seem the mentioned stability issues in #28875 (comment).

[jdalton]

🎉 🎉 🎉

@pavelfeldman

Side note:
Playwright assumes it performs the TS(X) transpilation, which does not happen with Bun - bun takes care of it on its own. Assumptions about the transpilation between Bun and Playwright will differ, so some things won't work. At least component testing (TSX transform) and watch mode (compilation cache) won't work. Most of it is probably fixable though if we take it one step at a time.

I've got it on my roadmap to make Bun work with pirates and overrides of Module#_compile 🐰

@mxschmitt

Sometimes getting Error: worker process exited unexpectedly (code=0, signal=null) which seem the mentioned stability issues in #28875 (comment).

✅ Fixed in https://bun.sh/blog/bun-v1.0.22

[Jarred-Sumner]

I suspect the worker issue still happens but much less frequently than before. Our Worker implementation isn't stable yet

[pavelfeldman]

Closing this PR then. We can have a new tracking meta-issue for Bun in the Issues to discuss problems like this one!

[karlhorky]

Is there already a new meta-issue?

Or should the old Bun issue be reopened?

• [Feature] Compatibility with bun #27139

[karlhorky]

With Bun support, I'm wondering whether that would also unlock custom loaders in Playwright, as community members such as @AlessioGr, @leotg130, @divmgl and @madiodio have asked for in a few places:

• [Feature] Support adding custom loaders to the test runner #26822
• [Feature]: Support importing SCSS in ESM #31689