[BUG] Unable to import module in test [ERR_REQUIRE_ESM]

[grybykm]

Context:

• Playwright Version: 1.20.1 (also tried beta)
• Node.js version: 16

Code Snippet

import { test } from '@playwright/test'
import getport from 'get-port'

test.describe('suite', () => {
    test('test', async ({ page }) => {
        console.log(await getport())
        await page.goto('https://playwright.dev')
    })
})

Describe the bug

Playwright fails with no test found error due to import import getport from 'get-port' of a module.

PW_EXPERIMENTAL_TS_ESM=1 doesn't help anyhow in any combination with or without "type": "module" in the package.json

Error [ERR_REQUIRE_ESM]: require() of ES Module browser-tests/node_modules/get-port/index.js from browser-tests/test/test.spec.ts not supported.
Instead change the require of index.js in browser-tests/test/test.spec.ts to a dynamic import() which is available in all CommonJS modules.

[frederikhors]

I think this is the same I was talking here: #12836 (comment).

Can you try with 1.20.0? It works for me.

[dgozman]

@grybykm I cannot repro this on macOS, node v16.14.0. Would you be able to share a full repro?

Here is what I tried:

// package.json
{
  "name": "sample",
  "version": "1.0.0",
  "type": "module",
  "dependencies": {
    "get-port": "^6.1.2",
    "@playwright/test": "^1.20.1"
  },
}


// playwright.config.ts
import { type PlaywrightTestConfig} from '@playwright/test';
const config: PlaywrightTestConfig = {
};
export default config;


// example.spec.ts
import { test } from '@playwright/test'
import getport from 'get-port'

test.describe('suite', () => {
    test('test', async ({ page }) => {
        console.log(await getport())
        await page.goto('https://playwright.dev')
    })
})


// command-line
PW_EXPERIMENTAL_TS_ESM=1 npx playwright test example.spec

[frederikhors]

@dgozman i have this on windows 10.

[grybykm]

@dgozman your example indeed works for me!
However, with PW_EXPERIMENTAL_TS_ESM=1 set I can't import any local files so I doesn't make much sense.

ex:
import { mock } from '../../src/mock'

the file

import { Page } from '@playwright/test'

export const mock = async (page: Page) => {}

another drawback of this approach is that I can't use require statement. I hope I can replace them with dynamic imports at some point.

require statements are still recommended in the official docs https://playwright.dev/docs/test-auth globalSetup: require.resolve('./global-setup')

[pavelfeldman]

Makes sense, folding it into #13078

[grybykm]

@pavelfeldman @dgozman are there any updates on this? Version 1.21.0 things still doesn't work all together.

A very basic and simple example. A test with some imports and global setup. The doc won't help because it uses global setup, imports doesn't work due to the error

[ERR_MODULE_NOT_FOUND]: Cannot find module '/mock' imported from /my.spec.ts

test example

import { test } from '@playwright/test'
import getport from 'get-port'
import { commonMock } from './mock'

test.describe('suite', () => {
    test('test', async ({ page }) => {
        console.log(await getport())
        await page.goto('https://playwright.dev')
    })
})

playwright config example

globalSetup: require.resolve('./global-setup'),

[dgozman]

@grybykm You should either import { commonMock } from './mock.js' or import { commonMock } from './mock.ts'. Refer to this comment for more details.