(@wdio/cli): use ts-node/esm and ts-node/register #11173

christian-bromann · 2023-09-15T16:03:09Z

Proposed changes

Taking another stab at this one.

@nextlevelbeard @jan-molak I would like to again get your input on this. I remember we reverted it last time because of weird stacktrace side effects. However I remember we added a test for this so if this build is passing we should be fine to go ahead. I don't see any other way to fix above issue.

Types of changes

Bugfix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Documentation update

Checklist

I have read the CONTRIBUTING doc
I have added tests that prove my fix is effective or that my feature works
I have added necessary documentation (if appropriate)
I have added proper type definitions for new commands (if appropriate)

Further comments

n/a

Reviewers: @webdriverio/project-committers

jan-molak · 2023-09-15T20:52:19Z

Let me try this locally and get back to you. I remember seeing ts-node go crazy when you specify the loader and use the registration function at the same time

jan-molak · 2023-09-15T21:36:11Z

Hey @christian-bromann. I made the below change to node_modules/@wdio/cli/build/commands/run.js locally:

- NODE_OPTIONS += ' --loader ts-node/esm/transpile-only --no-warnings';
+ NODE_OPTIONS += ' --loader ts-node/esm/transpile-only -r ts-node/register --no-warnings'

Unfortunately, I can confirm that while it helps to work around #10901 and makes the tests load correctly on Node 20, it breaks source maps support on Node 20, 18, and 16.

I tested it with the Serenity/JS / WebdriverIO integration test suite.

I tried to reproduce #10901 and see that the loader issue affects only Node 20; a newly created WebdriverIO project works correctly on Node 16 and 18.

What DOES work consistently on Node 16, 18, and 20, though, is not making any changes to @wdio/cli, but instead changing the generated project to use ESM (see my PR, so:

add "type": "module" to package.json
use .js imports in the generated scripts and page object files
set "moduleResolution": "node16" and "module": "node16" in tsconfig.json

I wonder, maybe instead of trying to make the loader work, we should modify the WebdriverIO wizard to generate an ESM module instead of CommonJS?

christian-bromann · 2023-09-15T21:47:03Z

it breaks source maps support on Node 20, 18, and 16.

Can you elaborate? In the demo project if I put in a failing assertion it gives me the correct line of code.

is not making any changes to @wdio/cli, but instead changing the generated project to use ESM

That would be the ideal solution but many folks still run on CJS even though using a lot of mixed ESM primitives. Ideally I would like WebdriverIO to support TypeScript with CJS.

jan-molak · 2023-09-15T21:50:42Z

it breaks source maps support on Node 20, 18, and 16.

Can you elaborate? In the demo project if I put in a failing assertion it gives me the correct line of code.

Could you share your demo project? I'm putting together a repro now.

is not making any changes to @wdio/cli, but instead changing the generated project to use ESM

That would be the ideal solution but many folks still run on CJS even though using a lot of mixed ESM primitives. Ideally I would like WebdriverIO to support TypeScript with CJS.

OK, let's keep thinking then :)

christian-bromann · 2023-09-15T22:13:00Z

Could you share your demo project? I'm putting together a repro now.

See https://github.com/zac11/wdio-work-demo

jan-molak · 2023-09-15T22:16:55Z

I have a repro with the above project, give me a sec to clean it up

jan-molak · 2023-09-15T22:50:45Z

OK, so here's a minimal example we can use for testing:
https://github.com/zac11/wdio-work-demo/pull/2/files

Below are my results using @wdio/cli: ^8.14.4 from @zac11's demo.

As you can see, with the patch, source maps report incorrect line locations of stack frames for both plain WebdriverIO and Serenity code.

Test 1: Using original `wdio-work-demo`

// node_modules/@wdio/cli/build/commands/run.js:164
NODE_OPTIONS += ' --loader ts-node/esm/transpile-only --no-warnings';

Node	Result
16.20.0	✅ PASS
18.16.0	✅ PASS
20.6.1	🚨 SyntaxError: Cannot use import statement outside a module

Test 2: Local patch

I modified @wdio/cli/build/commands/run.js in the demo to apply the patch from #11173

// node_modules/@wdio/cli/build/commands/run.js:164
- NODE_OPTIONS += ' --loader ts-node/esm/transpile-only --no-warnings';
+ NODE_OPTIONS += ' --loader ts-node/esm/transpile-only -r ts-node/register --no-warnings'

Node	Result
16.20.0	🚨 FAIL: Incorrect line locations in source maps
18.16.0	🚨 FAIL: Incorrect line locations in source maps
20.6.1	✅ PASS

Node 18 output

 "spec" Reporter:
------------------------------------------------------------------
[chrome 117.0.5938.62 mac os x #0-0] Running: chrome (v117.0.5938.62) on mac os x
[chrome 117.0.5938.62 mac os x #0-0] Session ID: 565be0638decbece2f4e9fc4f5917925
[chrome 117.0.5938.62 mac os x #0-0]
[chrome 117.0.5938.62 mac os x #0-0] » /test/specs/source-maps.e2e.ts
[chrome 117.0.5938.62 mac os x #0-0] Source maps support
[chrome 117.0.5938.62 mac os x #0-0]    ✖ should detect line number correctly
[chrome 117.0.5938.62 mac os x #0-0]    ✖ should detect instantiation location of a Serenity/JS interaction
[chrome 117.0.5938.62 mac os x #0-0]
[chrome 117.0.5938.62 mac os x #0-0] 2 failing (67ms)
[chrome 117.0.5938.62 mac os x #0-0]
[chrome 117.0.5938.62 mac os x #0-0] 1) Source maps support should detect line number correctly
[chrome 117.0.5938.62 mac os x #0-0] expect(received).toEqual(expected) // deep equality

- Expected  - 4
+ Received  + 4

  Array [
-   "source-maps.e2e.ts:39:19",
-   "source-maps.e2e.ts:35:12",
-   "source-maps.e2e.ts:31:12",
-   "source-maps.e2e.ts:5:40",
+   "source-maps.e2e.ts:31:19",
+   "source-maps.e2e.ts:28:12",
+   "source-maps.e2e.ts:25:12",
+   "source-maps.e2e.ts:6:38",
  ]
[chrome 117.0.5938.62 mac os x #0-0] Error: expect(received).toEqual(expected) // deep equality
[chrome 117.0.5938.62 mac os x #0-0]
[chrome 117.0.5938.62 mac os x #0-0] - Expected  - 4
[chrome 117.0.5938.62 mac os x #0-0] + Received  + 4
[chrome 117.0.5938.62 mac os x #0-0]
[chrome 117.0.5938.62 mac os x #0-0]   Array [
[chrome 117.0.5938.62 mac os x #0-0] -   "source-maps.e2e.ts:39:19",
[chrome 117.0.5938.62 mac os x #0-0] -   "source-maps.e2e.ts:35:12",
[chrome 117.0.5938.62 mac os x #0-0] -   "source-maps.e2e.ts:31:12",
[chrome 117.0.5938.62 mac os x #0-0] -   "source-maps.e2e.ts:5:40",
[chrome 117.0.5938.62 mac os x #0-0] +   "source-maps.e2e.ts:31:19",
[chrome 117.0.5938.62 mac os x #0-0] +   "source-maps.e2e.ts:28:12",
[chrome 117.0.5938.62 mac os x #0-0] +   "source-maps.e2e.ts:25:12",
[chrome 117.0.5938.62 mac os x #0-0] +   "source-maps.e2e.ts:6:38",
[chrome 117.0.5938.62 mac os x #0-0]   ]
[chrome 117.0.5938.62 mac os x #0-0]     at Context.<anonymous> (/Users/jan/Projects/jan-molak/wdio-work-demo/test/specs/source-maps.e2e.ts:10:27)
[chrome 117.0.5938.62 mac os x #0-0]
[chrome 117.0.5938.62 mac os x #0-0] 2) Source maps support should detect instantiation location of a Serenity/JS interaction
[chrome 117.0.5938.62 mac os x #0-0] expect(received).toEqual(expected) // deep equality

Expected: 22
Received: 18
[chrome 117.0.5938.62 mac os x #0-0] Error: expect(received).toEqual(expected) // deep equality
[chrome 117.0.5938.62 mac os x #0-0]
[chrome 117.0.5938.62 mac os x #0-0] Expected: 22
[chrome 117.0.5938.62 mac os x #0-0] Received: 18
[chrome 117.0.5938.62 mac os x #0-0]     at Context.<anonymous> (/Users/jan/Projects/jan-molak/wdio-work-demo/test/specs/source-maps.e2e.ts:20:31)
------------------------------------------------------------------
[chrome 117.0.5938.62 mac os x #0-1] Running: chrome (v117.0.5938.62) on mac os x
[chrome 117.0.5938.62 mac os x #0-1] Session ID: 8ad04d6691b3005d3c6c906db4ba9092
[chrome 117.0.5938.62 mac os x #0-1]
[chrome 117.0.5938.62 mac os x #0-1] » /test/specs/test.e2e.ts
[chrome 117.0.5938.62 mac os x #0-1] My Login application
[chrome 117.0.5938.62 mac os x #0-1]    ✓ should login with valid credentials
[chrome 117.0.5938.62 mac os x #0-1]
[chrome 117.0.5938.62 mac os x #0-1] 1 passing (1.5s)

Node 16 output

 "spec" Reporter:
------------------------------------------------------------------
[chrome 117.0.5938.62 mac os x #0-0] Running: chrome (v117.0.5938.62) on mac os x
[chrome 117.0.5938.62 mac os x #0-0] Session ID: dd8122606c4ce499e5dd2e95a59dc267
[chrome 117.0.5938.62 mac os x #0-0]
[chrome 117.0.5938.62 mac os x #0-0] » /test/specs/source-maps.e2e.ts
[chrome 117.0.5938.62 mac os x #0-0] Source maps support
[chrome 117.0.5938.62 mac os x #0-0]    ✖ should detect line number correctly
[chrome 117.0.5938.62 mac os x #0-0]    ✖ should detect instantiation location of a Serenity/JS interaction
[chrome 117.0.5938.62 mac os x #0-0]
[chrome 117.0.5938.62 mac os x #0-0] 2 failing (70ms)
[chrome 117.0.5938.62 mac os x #0-0]
[chrome 117.0.5938.62 mac os x #0-0] 1) Source maps support should detect line number correctly
[chrome 117.0.5938.62 mac os x #0-0] expect(received).toEqual(expected) // deep equality

- Expected  - 4
+ Received  + 4

  Array [
-   "source-maps.e2e.ts:39:19",
-   "source-maps.e2e.ts:35:12",
-   "source-maps.e2e.ts:31:12",
-   "source-maps.e2e.ts:5:40",
+   "source-maps.e2e.ts:31:19",
+   "source-maps.e2e.ts:28:12",
+   "source-maps.e2e.ts:25:12",
+   "source-maps.e2e.ts:6:38",
  ]
[chrome 117.0.5938.62 mac os x #0-0] Error: expect(received).toEqual(expected) // deep equality
[chrome 117.0.5938.62 mac os x #0-0]
[chrome 117.0.5938.62 mac os x #0-0] - Expected  - 4
[chrome 117.0.5938.62 mac os x #0-0] + Received  + 4
[chrome 117.0.5938.62 mac os x #0-0]
[chrome 117.0.5938.62 mac os x #0-0]   Array [
[chrome 117.0.5938.62 mac os x #0-0] -   "source-maps.e2e.ts:39:19",
[chrome 117.0.5938.62 mac os x #0-0] -   "source-maps.e2e.ts:35:12",
[chrome 117.0.5938.62 mac os x #0-0] -   "source-maps.e2e.ts:31:12",
[chrome 117.0.5938.62 mac os x #0-0] -   "source-maps.e2e.ts:5:40",
[chrome 117.0.5938.62 mac os x #0-0] +   "source-maps.e2e.ts:31:19",
[chrome 117.0.5938.62 mac os x #0-0] +   "source-maps.e2e.ts:28:12",
[chrome 117.0.5938.62 mac os x #0-0] +   "source-maps.e2e.ts:25:12",
[chrome 117.0.5938.62 mac os x #0-0] +   "source-maps.e2e.ts:6:38",
[chrome 117.0.5938.62 mac os x #0-0]   ]
[chrome 117.0.5938.62 mac os x #0-0]     at Context.<anonymous> (/Users/jan/Projects/jan-molak/wdio-work-demo/test/specs/source-maps.e2e.ts:10:27)
[chrome 117.0.5938.62 mac os x #0-0]
[chrome 117.0.5938.62 mac os x #0-0] 2) Source maps support should detect instantiation location of a Serenity/JS interaction
[chrome 117.0.5938.62 mac os x #0-0] expect(received).toEqual(expected) // deep equality

Expected: 22
Received: 18
[chrome 117.0.5938.62 mac os x #0-0] Error: expect(received).toEqual(expected) // deep equality
[chrome 117.0.5938.62 mac os x #0-0]
[chrome 117.0.5938.62 mac os x #0-0] Expected: 22
[chrome 117.0.5938.62 mac os x #0-0] Received: 18
[chrome 117.0.5938.62 mac os x #0-0]     at Context.<anonymous> (/Users/jan/Projects/jan-molak/wdio-work-demo/test/specs/source-maps.e2e.ts:20:31)
------------------------------------------------------------------
[chrome 117.0.5938.62 mac os x #0-1] Running: chrome (v117.0.5938.62) on mac os x
[chrome 117.0.5938.62 mac os x #0-1] Session ID: 7f74068f8a8d40747c3ed6c98a00cde9
[chrome 117.0.5938.62 mac os x #0-1]
[chrome 117.0.5938.62 mac os x #0-1] » /test/specs/test.e2e.ts
[chrome 117.0.5938.62 mac os x #0-1] My Login application
[chrome 117.0.5938.62 mac os x #0-1]    ✓ should login with valid credentials
[chrome 117.0.5938.62 mac os x #0-1]
[chrome 117.0.5938.62 mac os x #0-1] 1 passing (2.4s)

jan-molak · 2023-09-15T23:19:34Z

There's an interesting thread on TS-Node about a similar issue with source maps - TypeStrong/ts-node#2006

Unfortunately, neither of the below incantations has any effect on the issue with source maps:

NODE_OPTIONS += ' --loader ts-node/esm/transpile-only --no-warnings --enable-source-maps';
NODE_OPTIONS += ' --loader ts-node/esm/transpile-only -r ts-node/register --enable-source-maps --no-warnings'

There are other mentions of the same source mapping issue:

christian-bromann · 2023-09-22T01:11:45Z

Closing in favor of #11173 .. thanks for all the work on this @jan-molak

(@wdio/cli): use ts-node/esm and ts-node/register

fe6f469

christian-bromann added the PR: Bug Fix 🐛 PRs that contain bug fixes label Sep 15, 2023

jan-molak added a commit to jan-molak/wdio-work-demo that referenced this pull request Sep 15, 2023

Counter examples for webdriverio/webdriverio#11173

cdff0ac

This was referenced Sep 16, 2023

Support for running WebdriverIO TypeScript tests on Node 20. Fixes #10901 #11178

Closed

Support for running WebdriverIO TypeScript tests on Node 20. Fixes #10901 #11202

Merged

christian-bromann closed this Sep 22, 2023

christian-bromann deleted the cb-ts-fix branch September 22, 2023 01:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(@wdio/cli): use ts-node/esm and ts-node/register #11173

(@wdio/cli): use ts-node/esm and ts-node/register #11173

christian-bromann commented Sep 15, 2023

jan-molak commented Sep 15, 2023

jan-molak commented Sep 15, 2023 •

edited

christian-bromann commented Sep 15, 2023

jan-molak commented Sep 15, 2023

christian-bromann commented Sep 15, 2023

jan-molak commented Sep 15, 2023 •

edited

jan-molak commented Sep 15, 2023 •

edited

jan-molak commented Sep 15, 2023 •

edited

christian-bromann commented Sep 22, 2023

(@wdio/cli): use ts-node/esm and ts-node/register #11173

(@wdio/cli): use ts-node/esm and ts-node/register #11173

Conversation

christian-bromann commented Sep 15, 2023

Proposed changes

Types of changes

Checklist

Further comments

Reviewers: @webdriverio/project-committers

jan-molak commented Sep 15, 2023

jan-molak commented Sep 15, 2023 • edited

christian-bromann commented Sep 15, 2023

jan-molak commented Sep 15, 2023

christian-bromann commented Sep 15, 2023

jan-molak commented Sep 15, 2023 • edited

jan-molak commented Sep 15, 2023 • edited

Test 1: Using original wdio-work-demo

Test 2: Local patch

Node 18 output

Node 16 output

jan-molak commented Sep 15, 2023 • edited

christian-bromann commented Sep 22, 2023

jan-molak commented Sep 15, 2023 •

edited

jan-molak commented Sep 15, 2023 •

edited

jan-molak commented Sep 15, 2023 •

edited

Test 1: Using original `wdio-work-demo`

jan-molak commented Sep 15, 2023 •

edited