[Bug]: Playwrigtht doesn't work when using Vite 6; CJS modules are deprecated in Vite 5; `__dirname` not defined

skamansam commented 3 weeks ago

Version

1.46.1

Steps to reproduce

Create a new repo: npm init playwright@latest new-project
add "type": "module", to package.json
uncomment the line that reads the .env file
run npx playwright test

Expected behavior

The tests to run successfully

Actual behavior

ReferenceError: __dirname is not defined in ES module scope
    at file:///home/sam/src/vscode-playwright-fails/playwright.config.ts:9:36
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at requireOrImport (/home/sam/src/vscode-playwright-fails/node_modules/playwright/lib/transform/transform.js:191:26)
    at loadUserConfig (/home/sam/src/vscode-playwright-fails/node_modules/playwright/lib/common/configLoader.js:96:46)
    at loadConfig (/home/sam/src/vscode-playwright-fails/node_modules/playwright/lib/common/configLoader.js:101:22)
    at loadConfigFromFileRestartIfNeeded (/home/sam/src/vscode-playwright-fails/node_modules/playwright/lib/common/configLoader.js:258:10)
    at runTests (/home/sam/src/vscode-playwright-fails/node_modules/playwright/lib/program.js:194:18)
    at t.<anonymous> (/home/sam/src/vscode-playwright-fails/node_modules/playwright/lib/program.js:54:7)

Additional context

For Vite, the CJS build is deprecated. see https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more info.

This can be fixed by changing that line to:

dotenv.config({ path: path.resolve(import.meta.dirname, '.env') });

Environment

System:
    OS: Linux 6.10 Fedora Linux 40 (Workstation Edition)
    CPU: (16) x64 AMD Ryzen 9 6900HX with Radeon Graphics
    Memory: 20.79 GB / 30.60 GB
    Container: Yes
  Binaries:
    Node: 20.15.1 - ~/.nvm/versions/node/v20.15.1/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v20.15.1/bin/npm
    pnpm: 9.5.0 - ~/.nvm/versions/node/v20.15.1/bin/pnpm
  Languages:
    Bash: 5.2.26 - /usr/bin/bash
  npmPackages:
    @playwright/test: ^1.46.1 => 1.46.1

Skn0tt commented 3 weeks ago

Hi Sam! I can reproduce, but I think everything's working as intended. If you add type: "module" to package.json, you'll have to use import.meta.url instead of __dirname. This is classic Node.js behaviour and not specific to Playwright.

You link to a Vite FAQ entry, but I don't think that's related. Playwright uses Vite under the hood for component testing, but the repro doesn't include component tests. Also, I think the FAQ entry is about changes to Vite's library API, not about the kinds of projects it can bundle.

Could you elaborate on why you think this is related to changes in Vite?

skamansam commented 2 weeks ago

Here is what happens when I run vite without type: "module"` present -

pnpm dev

> redshred-dashboard@2.0.0b20220805110057 dev /home/sam/workspace/dashboard
> vite --mode development --host

The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.

  VITE v5.4.2  ready in 196 ms

skamansam commented 2 weeks ago

My real issue is that the default playwright config has the CJS build's usage commented out (with instructions), but doesn't include anything about the non-CJS build.

microsoft / playwright