[BUG] ES Modules with playwright.config.ts NOT working

[balazStefan]

System info

• Playwright Version: 1.31.0
• Operating System: All
• Browser: All
• Other info:

Source code

• I provided exact source code that allows reproducing the issue locally.

I got problem with playwright inside rush js monorepo .
I got different modules each module should have own folder testing, and inside it there should be place for a tests , testcases etc. NO own playwright.config.ts , I am using inside package.json
"type":"module" , and using in script section like this :
"test:rendering": "cross-env NODE_ENV=test playwright test --config=../../../framework/e2e-tests/playwright/playwright.config.ts modules/gallery/rendering-page/e2e/rendering/",
but it returns error like this on photo . The problem is when I remove type:module everything is working , but I need to have inside tsconfing.json this configuration :
In order for TypeScript to work with ESM properly (type module in the package.json) it needs certain values set for moduleResolution .
For server/NodeJS code: moduleResolution: NodeNext
For frontend/bundled code: moduleResolutiion: Bundler (same as NodeNext but doesn’t require file extension in imports, which NodeJS needs in ESM mode)
Those settings will enable Typescript reading the exports field in the package.jsons and also enable certain CJS/ESM compatibility things.
One thing to take away from this:
We are using moduleResolution: Node or Node10 in a lot of places. Wherever you see this, we should update to the values above (depending on whether it’s bundled code or NodeJS code). This will make switching on type: module easier in the future.

Config file

import type { PlaywrightTestConfig } from '@playwright/test';
import { devices } from '@playwright/test';
import dotenv from 'dotenv';
import path from 'path';

/**
 * Read environment variables from file.
 * https://github.com/motdotla/dotenv
 */

const envFile = process.env.ENV_NAME ? `.env.${process.env.ENV_NAME}` : '.env.local';
dotenv.config({ path: path.resolve(__dirname, '.', envFile) });

/**
 * See https://playwright.dev/docs/test-configuration.
 */
const config: PlaywrightTestConfig = {
  testDir: './tests',
  /* Maximum time one test can run for. */
  timeout: 40 * 1000,
  expect: {
    /**
     * Maximum time expect() should wait for the condition to be met.
     * For example in `await expect(locator).toHaveText();`
     */
    timeout: 7000,
  },
  /* Run tests in files in parallel */
  fullyParallel: false,
  /* Fail the build on CI if you accidentally left test.only in the source code. */
  forbidOnly: !!process.env.CI,
  /* Retry on CI only */
  retries: process.env.CI ? 2 : 1,
  /* Opt out of parallel tests on CI. */
  /* workers need to be set with 1, because for ctf tests need to run one by one because of locking mechanism */
  workers: process.env.CI ? 1 : 1,
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: [['html'], ['junit', { outputFile: 'results.xml' }]],
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    httpCredentials: {
      username: process.env.OPM_USERNAME!,
      password: process.env.OPM_PASSWORD!,
    },
    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
    actionTimeout: 0,
    /* Base URL to use in actions like `await page.goto('/')`. */
    // baseURL: 'http://localhost:3000',

    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'on-first-retry',
  },

  /* Configure projects for major browsers */
  projects: [
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
      },
    },

    {
      name: 'firefox',
      use: {
        ...devices['Desktop Firefox'],
        // NOTE: for FF we are disabling certificate checks
        // due to upstream reports like
        //  https://github.com/microsoft/playwright/issues/8272
        ignoreHTTPSErrors: true,
      },
    },

    {
      name: 'webkit',
      use: {
        ...devices['Desktop Safari'],
      },
    },

    /* Test against mobile viewports. */
    // {
    //   name: 'Mobile Chrome',
    //   use: {
    //     ...devices['Pixel 5'],
    //   },
    // },
    // {
    //   name: 'Mobile Safari',
    //   use: {
    //     ...devices['iPhone 12'],
    //   },
    // },

    /* Test against branded browsers. */
    // {
    //   name: 'Microsoft Edge',
    //   use: {
    //     channel: 'msedge',
    //   },
    // },
    // {
    //   name: 'Google Chrome',
    //   use: {
    //     channel: 'chrome',
    //   },
    // },
  ],

  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
  // outputDir: 'test-results/',

  /* Run your local dev server before starting the tests */
  // webServer: {
  //   command: 'npm run start',
  //   port: 3000,
  // },
};

export default config;

Steps

• [Run the test]
• [...]

Expected

I am able to run tests from independent module and it can find configuration, problem , is for playwright it transform it like this
{
"compilerOptions": {
"target": "ESNext",
"module": "commonjs",
"moduleResolution": "Node",
"sourceMap": true,
"outDir": "../tests-out",
}
}

Actual behavior is on photo

[yury-s]

I am using inside package.json "type":"module" ,... The problem is when I remove type:module everything is working ..

And you have "module": "commonjs", in your tsconfig which sounds wrong. Folding this into #23662

[balazStefan]

no, I do not in both I have type: module