Bug: Unknown file extension ".ts" for playwright.config.ts

[kmedara]

Given

• I am working in a vite + vue3 project with "type":"module"
• And I have followed the getting started instructions at https://vitalets.github.io/playwright-bdd/
• and my playwright.config.ts file is as follows:

import { defineConfig, devices } from '@playwright/test'
import { defineBddConfig } from 'playwright-bdd'

const testDir = defineBddConfig({
    paths: ['./sample.feature'],
    require:['./steps.ts']
})

export default defineConfig({
  testDir,
//...defaults
})

When

• i run npx bddgen && playwright test

Then

• I receive the error

node:internal/modules/esm/get_format:160
  throw new ERR_UNKNOWN_FILE_EXTENSION(ext, filepath);
        ^

TypeError: Unknown file extension ".ts" for K:\source\playwright-bdd-example\playwright.config.ts
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:160:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:203:36)
    at defaultLoad (node:internal/modules/esm/load:143:22)
    at ModuleLoader.load (node:internal/modules/esm/loader:409:7)
    at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:291:45)
    at link (node:internal/modules/esm/module_job:76:21) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

But I expect
Bdd scenarios to be transformed to playwright tests and run

Isolated demo
Reproduced using the example demo and setting type:module

Environment

platform: win32
node: v20.11.0
playwright-bdd: v5.7.1
@playwright/test: v1.40.0
@cucumber/cucumber: v9.2.0
Playwright config file: playwright.config.ts

I've tried a few working arounds listed here but to no avail

• https://playwright.dev/docs/test-typescript#manually-compile-tests-with-typescript
• adding requireModule: ['ts-node/register'] to the defineBddConfig() block
• adding cross-env NODE_OPTIONS=\"--loader ts-node/esm\" before npx bddgen && playwright test

[vitalets]

Hi @kmedara ! Thanks for highlighting that.
I've created a working example in ESM. Could you check the diff and let me know does it work in your vite + vue3 setup.

I will update getting starting section in docs for ESM.

[vitalets]

Improved ESM docs and added fully working ESM example.