CodeceptJS 4.x: The console's docs suggests "module": "ESNext", but can't import page object with such setting (Cannot find module)

[mirao]

config codecept.conf.ts

export const config: CodeceptJS.MainConfig = {
  tests: "./*_test.ts",
  output: "./output",
  helpers: {
    Playwright: {
      browser: "chromium",
      url: "http://localhost",
      show: true,
    },
  },
  name: "esm",
  require: ["ts-node/esm"], // ! You can also test it with `require: ["tsx/esm"]`, but you get the same issue !
};

tsconfig.json (as suggested by CodeceptJS if you run a test without any "require" in your config) in 4.x

{
  "ts-node": {
    "files": true,
    "esm": true,
    "experimentalSpecifierResolution": "node"
  },
  "compilerOptions": {
    "target": "es2022",
    "lib": ["es2022", "DOM"],
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strictNullChecks": false,
    "types": ["codeceptjs", "node"],
    "declaration": true,
    "skipLibCheck": true,
  },
  "exclude": ["node_modules"],
}

PO pages/Login.ts:

const { I } = inject();

export default {
  login(username: string) {
    I.say("Logging in with user: " + username);
  },
};

test My_test.ts

import loginPage from "./pages/Login";

Feature("My");

Scenario("test something", () => {
  loginPage.login("myusername");
});

Test fails ❌

mirao@rog:~/workspace/esm$ npx codeceptjs run --verbose
***************************************
nodeInfo:  20.19.5
osInfo:  Linux 6.14 Ubuntu 24.04.3 LTS 24.04.3 LTS (Noble Numbat)
cpuInfo:  (16) x64 AMD Ryzen 7 9700X 8-Core Processor
chromeInfo:  142.0.7444.175
edgeInfo:  "N/A"
firefoxInfo:  145.0
safariInfo:  N/A
playwrightBrowsers:  "chromium: 141.0.7390.37, firefox: 142.0.1, webkit: 26.0"
If you need more detailed info, just run this: npx codeceptjs info
***************************************
Error: Cannot find module '/home/mirao/workspace/esm/pages/Login' imported from /home/mirao/workspace/esm/My_test.ts
Did you mean to import "./pages/Login.ts"?
    at finalizeResolution (node:internal/modules/esm/resolve:283:11)
    at moduleResolve (node:internal/modules/esm/resolve:952:10)
    at defaultResolve (node:internal/modules/esm/resolve:1188:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:708:12)
    at ModuleLoader.#cachedDefaultResolve (node:internal/modules/esm/loader:657:25)
    at ModuleLoader.getModuleJobForRequire (node:internal/modules/esm/loader:413:53)
    at new ModuleJobSync (node:internal/modules/esm/module_job:375:34)
    at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:386:11)
    at loadESMFromCJS (node:internal/modules/cjs/loader:1363:24)
    at Module._compile (node:internal/modules/cjs/loader:1503:5)

Cannot find module '/home/mirao/workspace/esm/pages/Login' imported from /home/mirao/workspace/esm/My_test.ts
Did you mean to import "./pages/Login.ts"?

Error: 
    at finalizeResolution (node:internal/modules/esm/resolve:283:11)
    at moduleResolve (node:internal/modules/esm/resolve:952:10)
    at defaultResolve (node:internal/modules/esm/resolve:1188:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:708:12)
    at ModuleLoader.#cachedDefaultResolve (node:internal/modules/esm/loader:657:25)
    at ModuleLoader.getModuleJobForRequire (node:internal/modules/esm/loader:413:53)
    at new ModuleJobSync (node:internal/modules/esm/module_job:375:34)
    at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:386:11)
    at loadESMFromCJS (node:internal/modules/cjs/loader:1363:24)
    at Module._compile (node:internal/modules/cjs/loader:1503:5)

If you use the default option "module": "commonjs", it works well ✔️

CodeceptJS v4.0.1-beta.15 #StandWithUkraine
Using test root "/home/mirao/workspace/esm"
Helpers: Playwright
Plugins: screenshotOnFail

My --
/home/mirao/workspace/esm/My_test.ts
    [1]  Starting recording promises
    Timeouts: 
 › [Session] Starting singleton browser session
  test something
 › [New Session] {"ignoreHTTPSErrors":false,"acceptDownloads":true}
  Scenario()
    I say "Logging in with user: myusername"
   Logging in with user: myusername
  ✔ OK in 4ms


  OK  | 1 passed   // 5s

So a question is: How to setup PO for the suggested ESM module setting?

Used SW:

• CodeceptJS 4.0.1-beta.15

[kobenguyent]

interesting, this loader works like a charm -> require: ["tsx/cjs"]

    [1]  Starting recording promises
    Timeouts: 
 › [Session] Starting singleton browser session
  test something
 › [New Session] {"ignoreHTTPSErrors":false,"acceptDownloads":true}
  Scenario()
    I say "Logging in with user: myusername"
   Logging in with user: myusername
  ✔ OK in 8ms


  OK  | 1 passed   // 7s

[mirao]

@kobenguyent Yeah, it works with require: ["tsx/cjs"], thanks.
I found a solution for require: ["tsx/esm"]: It's needed to run tests using the explicit tsx wrapper, e.g.

package.json:

...
  "scripts": {
    "codecept": "tsx node_modules/codeceptjs/bin/codecept.js",
    "dry-run": "tsc --noEmit"
  },
...

Run a test

mirao@rog:~/workspace/esm$ npm run codecept -- run My_test.ts

> esm@1.0.0 codecept
> tsx node_modules/codeceptjs/bin/codecept.js run My_test.ts

CodeceptJS v4.0.1-beta.15 #StandWithUkraine
Using test root "/home/mirao/workspace/esm"

My --
  ✔ test something in 340ms

  OK  | 1 passed   // 6s

AI says

npm run codecept runs the tsx wrapper you added, so the CodeceptJS CLI is started under a TypeScript-aware loader. That loader is active before any .ts modules are resolved, so imports like ./pages/Login load correctly.

---

Anyway I didn't find a solution for ts-node/esm. I'm considering using tsx/esm (the most modern way) if I will be able to solve other issues with my tests in CodeceptJS 4.x