[Question] How to use babel?

[ghost]

So in root of my project I have following babel.config.js,

module.exports = {
  presets: ["babel-preset-vite"]
}

Now, how do I tell playwright to use the babel config?

[mxschmitt]

Playwright does not do anything special there. Do you consume it as a library or is this question Playwright Test (@playwright/test) specific?

What are you trying to archive? Be aware that Playwright is a Node.js library, you can't consume it from the web, because it requires operating system interaction, e.g. launching processes, writing files etc.

[ghost]

It's just that I can't use import.meta in Playwright so I thought of using babel-preset-vite. which basically transforms import.meta.env to process.env.

[mxschmitt]

How do you plan to consume Playwright? Inside your web application? Since Vite is a frontend bundler, this won't work if I understand Vite correctly.

[ghost]

Well I use nodejs npx playwright test. But import.meta is not vite exclusive though if I'm not mistaken. Is it possible to support import.meta in playwright?

[mxschmitt]

There is no relation between npx playwright test and Vite. With Playwright Test import.meta gets filled if you use the .mjs extension. Does this work for you or what are you trying to achieve?

[ghost]

Oh it requires .mjs extension. Didn't know that. But shouldn't it work for Typescript files? I get this error in setup-test.ts which is globalSetup file for Playwright,

$ npx playwright test
Using config at /Users/axel/projects/project1/playwright.config.ts
/Users/axel/projects/project1/setup-test.ts:22
console.log(import.meta);
                   ^^^^

SyntaxError: Cannot use 'import.meta' outside a module
    at wrapSafe (internal/modules/cjs/loader.js:988:16)
    at Module._compile (internal/modules/cjs/loader.js:1036:27)
    at Module._compile (/Users/axel/projects/project1/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Object.newLoader [as .ts] (/Users/axel/projects/project1/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Loader._requireOrImport (/Users/axel/projects/project1/node_modules/@playwright/test/lib/loader.js:214:18)
    at Loader.loadGlobalHook (/Users/axel/projects/project1/node_modules/@playwright/test/lib/loader.js:144:27)
    at Runner._run (/Users/axel/projects/project1/node_modules/@playwright/test/lib/runner.js:241:84)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

This is my tsconfig.json,

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": [
    "setup-test.ts",
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ]
}

[aslushnikov]

We don't use tsconfig to compile typescript, but there's a metabug about it: #7121

[ghost]

I see

[dugisu]

@aslushnikov @mxschmitt What's the solution for this? I'm encountering this problem and I have no solution for it. I can't convert my project to type: module as that has a lot of side effects.

[gazpachu]

I'm also interested in this problem. Using .mjs fixes the import.meta issue, but then this other error appears on <App />:

JSX not allowed in files with extension '.mjs'

This happens on the sample test from the docs: https://playwright.dev/docs/test-components

import { expect, test } from '@playwright/experimental-ct-react';

import { App } from './App';

test.use({ viewport: { width: 500, height: 500 } });

test('should work', async ({ mount }) => {
  const component = await mount(<App />);
  await expect(component).toBeVisible();
});