[BUG] Regression in 1.27 for ESM file extensions

[drwpow]

Context:

• Playwright Version: 1.27.1
• Operating System: macOS
• Node.js version: 18.10
• Browser: N/A
• Extra: N/A

Code Snippet

Trying to import test-utils.ts in a Playwright test:

// App.test.ts
import { setupTest } from './test-utils.js';

// Error: Cannot find module './test-utils.js'

Describe the bug

When trying to import .ts files, ESM requires an extension. This was working in version 1.26. However, when upgrading to 1.27, the “Cannot find module” error occurs. Downgrading back to 1.26 again fixes the problem and the file is imported just fine.

Worth highlighting that test-utils.ts (TypeScript) is the extension, not .js, but following convention .js is preferred.

Also worth noting that my repo is not "type": "module" which may be causing an issue (but we are using ESM throughout and are using "module": "ESNext" in TSConfig).

[pavelfeldman]

Things work for me using exact import from your example.

Also worth noting that my repo is not "type": "module" which may be causing an issue (but we are using ESM throughout and are using "module": "ESNext" in TSConfig).

Note that since you do not specify "type": "module", you are running in the CJS mode, tsconfig has no control over the Node runtime. So your TS imports are converted into the requires. It also assumes that test-utils.js is a CJS file. You should pick the site you are on: ESM or CJS and be consistent with it.

[drwpow]

Yes we probably should change to { "type": "module" } at the package level. But I’m still noticing a behavioral change where from 1.26 to 1.27 that same import either works or doesn’t. That seems like unexpected behavior? That’s more the issue here.

I do have workarounds such as using require(), or omitting the extension, that seem to work in 1.27. But I guess I’m wondering why the import logic changed between 1.26 and 1.27. I don’t believe it has anything to do with tsconfig.

[pavelfeldman]

There were subtle changes to the resolver/loader, they could have affected things. In either case, if you have a small repro where import { setupTest } from './test-utils.js'; does not work, could you share it with us? It should work and it does work for me locally on a small example.

[drwpow]

Sure! I was able to create a fairly-simple repro: https://github.com/drwpow/playwright-import-repro/.

Curious if this is just something weird on my machine or if you see the error too here.

[pavelfeldman]

Awesome, thanks, I can repro it. I just could not add 2 + 2 in your original description - now that I read it, it explains the use case very well.

// example.test.ts
import { gimmeAOne } from "./playwright-utils.js";

// playwright-utils.ts
export function gimmeAOne() {
  return 1;
}

does not work in Playwright v1.27 in non-ESM mode.