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

[jgerigmeyer]

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 #16185 and/or nodejs/node#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.

[rwoll]

Thanks for your report and the link to a repo. I forked your example and ran it in a default GitHub Codespace. However, it did not produce any errors:

@rwoll ➜ /workspaces/pw-esm-repro (main) $ yarn --version
1.22.15
@rwoll ➜ /workspaces/pw-esm-repro (main) $ node --version
v16.14.2
@rwoll ➜ /workspaces/pw-esm-repro (main) $ npm --version
8.5.0
@rwoll ➜ /workspaces/pw-esm-repro (main) $ yarn playwright test
yarn run v1.22.15
$ /workspaces/pw-esm-repro/node_modules/.bin/playwright test

Running 1 test using 1 worker

[WebServer] 
  dist/index.js  149b 

  ✓  tests/index.spec.js:9:1 › toggle visibility (972ms)


  1 passed (2s)
Done in 3.04s.
@rwoll ➜ /workspaces/pw-esm-repro (main) $ yarn test
yarn run v1.22.15
$ playwright test

Running 1 test using 1 worker

[WebServer] 
  dist/index.js  149b 

  ✓  tests/index.spec.js:9:1 › toggle visibility (969ms)


  1 passed (2s)
Done in 3.02s.

Based on the paths to the executables in your description, it looks like you are using Node and NPM provided by nvm, but yarn is coming from elsewhere. Perhaps try uninstalling yarn, and then from in the nvm environment you are using for Node and NPM, install yarn via npm i -g yarn.

[jgerigmeyer]

Hi @rwoll, thanks for looking into it! I'm still consistently seeing this error, even using various different yarn installations.

Can you confirm that you're testing on the ts-yarn branch of the repo?

[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.

[pavelfeldman]

Works for me on:

yarn v1.22.19
esbuild ^0.15.5
playwright 1.25

[jgerigmeyer]

Interesting, I'm still seeing the same error with those upgraded versions on https://github.com/jgerigmeyer/pw-esm-repro/tree/ts-yarn

[pavelfeldman]

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