[BUG] webServer.command `esbuild` fails with ESM and Yarn

Context

• Playwright Version: @playwright/test@1.24.2
• Operating System: Mac with M1 chip
• Node.js version: v16.16.0
• Browser: n/a
• Extra: Using ESM ("type": "module"), TypeScript 4.7.4 with "module": "NodeNext", esbuild@0.14.53, and dependencies installed with yarn@1.22.19

System:

• OS: macOS 12.5
• Memory: 1.06 GB / 32.00 GB

Binaries:

• Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
• Yarn: 1.22.19 - ~/.yarn/bin/yarn
• npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm

Languages:

• Bash: 3.2.57 - /bin/bash

Code Snippet

playwright.config.js:

export default {
  webServer: {
    command: 'yarn esbuild --serve=3000',
    url: 'http://localhost:3000/',
  },
  use: {
    baseURL: 'http://localhost:3000/',
  },
};

Describe the bug

I’m honestly not sure if this is a bug in Playwright, or Yarn, or esbuild 😕. But with the combination of the three and the above config, the webServer.command fails on a yarn playwright test run:

➜ yarn playwright test
yarn run v1.22.19
$ /<...>/node_modules/.bin/playwright test
(node:45336) ExperimentalWarning: --experimental-loader is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)

Running 1 test using 1 worker

[WebServer] (node:45377) ExperimentalWarning: --experimental-loader is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
[WebServer] (node:45417) ExperimentalWarning: --experimental-loader is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
[WebServer] node:internal/errors:465
    ErrorCaptureStackTrace(err);
    ^

TypeError: Unknown file extension "" for /<...>/node_modules/esbuild/bin/esbuild
    at new NodeError (node:internal/errors:372:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:76:11)
    at defaultGetFormat (node:internal/modules/esm/get_format:118:38)
    at defaultLoad (node:internal/modules/esm/load:21:20)
    at load (/<...>/node_modules/@playwright/test/lib/experimentalLoader.js:52:62)
    at ESMLoader.load (node:internal/modules/esm/loader:407:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:326:22)
    at new ModuleJob (node:internal/modules/esm/module_job:66:26)
    at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:345:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:304:34)
    at async Promise.all (index 0)
    at ESMLoader.import (node:internal/modules/esm/loader:385:24)
    at loadESM (node:internal/process/esm_loader:88:5)
    at handleMainPromise (node:internal/modules/run_main:61:12) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}
[WebServer] error Command failed with exit code 1.

Error: Process from config.webServer was not able to start. Exit code: 1




  1 skipped
error Command failed with exit code 1.

This seems possibly related to https://github.com/microsoft/playwright/issues/16185 and/or https://github.com/nodejs/node/issues/34049?

Repro

1. Clone https://github.com/jgerigmeyer/pw-esm-repro
2. Checkout ts-yarn branch
3. yarn install
4. yarn test

When packages are installed via npm install with otherwise the exact same setup (see ts-npm branch on https://github.com/jgerigmeyer/pw-esm-repro), tests pass as expected.

[pavelfeldman]

Hm, I can repro it now with your repo. I think I have a good idea on what is happening…

[rwoll]

@jgerigmeyer Oops—missed that step! I can repro the error.

I’m not sure yet what the source of it is, but we can dig in in the coming days. If you investigate further, please update with your findings here.