targeting my app to es2020 causes unexpected failures

[LironHazan]

What is your Scenario?

I need to target my Angular typescript app to es2020, till recently I was targeting to es2015 (tsconfig).

Somewhere in my code there's the following line which uses optional chaining to guard from nullish/undefined cases:
localStorageData?.[columnDefItem.field]

When running my tests in an es2015 , Chrome 98.0.4758.80 the code shipped to the browser was transformed into:

if (localStorageData === null || localStorageData === void 0 ? void 0 : __get$(localStorageData,columnDefItem.field) )

But when running into es2020, chrome 98.0.4758.80, the guard was removed:

if ( __get$(localStorageData,columnDefItem.field) )

The full stacktrace:

hammerhead.js:15 ERROR Error: Cannot read property 'name' of null
    at Function.t._error (hammerhead.js:12:31820)
    at t._propertyGetter (hammerhead.js:13:539)
    at default-src_app_mgmt-ui_ui-table_ui-table_module_ts.js:7829:18
    at Array.forEach (<anonymous>)
    at UitableColumnStatusService.createTableColumnToggleObj (default-src_app_mgmt-ui_ui-table_ui-table_module_ts.js:7820:20)
    at UitableColumnStatusService.createColumnToggleObj (default-src_app_mgmt-ui_ui-table_ui-table_module_ts.js:7796:44)
    at UiTableService.createColumnToggleObj (default-src_app_mgmt-ui_ui-table_ui-table_module_ts.js:10167:41)
    at default-src_app_mgmt-ui_ui-table_ui-table_module_ts.js:9200:33
    at sentryWrapped (vendor.js:2353:17)
    at timer (polyfills.js:5458:41)
    at ZoneDelegate.invokeTask (polyfills.js:3482:31)
    at Object.onInvokeTask (vendor.js:240480:25)
    at ZoneDelegate.invokeTask (polyfills.js:3481:60)
    at Zone.runTask (polyfills.js:3254:47)
    at invokeTask (polyfills.js:3563:34)
    at ZoneTask.invoke (polyfills.js:3552:48)
    at data.args.<computed> (polyfills.js:5438:32)

Does the hammerhead.js responsible for the code instrumentation?
Is there a workaround I can use at the momet?

The testcafe version is 1.18.1

Appreciate any help!!

What is the Current behavior?

Code was transformed into:
if ( __get$(localStorageData,columnDefItem.field) )

What is the Expected behavior?

Proper transform:
if (localStorageData === null || localStorageData === void 0 ? void 0 : __get$(localStorageData,columnDefItem.field) )

What is your public website URL? (or attach your complete example)

The repo is private.

What is your TestCafe test code?

no need.

Your complete configuration file

No response

Your complete test report

No response

Screenshots

No response

Steps to Reproduce

1. in your application tsconfig.json set the target to es2020
2. serve your app (dev mode is ok, happens both when bundled or in dev mode)
3. run your test

TestCafe version

1.18.1

Node.js version

16.10

Command-line arguments

./node_modules/.bin/testcafe 'chrome --incognito' e2e/tests/roles/happy-flows.e2e-spec.ts --compiler-options typescript.customCompilerModulePath=../typescript --debug-on-fail

Browser name(s) and version(s)

Chrome 98.0.4758.80

Platform(s) and version(s)

macOS 10.15.7

Other

Thanks!

[github-actions]

Thank you for submitting this issue. We would love to assist you and diagnose it. However, we need a simple sample that we can easily run on our side in order to replicate the issue and research its cause. Without a sample, we are not able to figure out what's going on and why this issue occurs. Refer to this article to create the best example: How To: Create a Minimal Working Example When You Submit an Issue. We look forward to your response.

[github-actions]

Thank you for submitting this issue. Since you are using an outdated version of TestCafe, we recommend you update TestCafe to the latest version to check if this issue has been addressed. We constantly improve our tools, and there is a chance that this issue has been already resolved and/or is no longer reproducible in the latest version. We look forward to your response.

[LironHazan]

@aleks-pro
Can you recommend of a starter which doesn't contains the testcafe builder?
I tried to use the demo-app of this repo ,
I added the following code to app.ts:

    const localStorageData = {};
    const foo = 'bar';
    console.log('before if')
    if( localStorageData?.[foo]) {
      console.log('here')
    }

And instead of running via the builder I started the app locally and ran as follows:

../node_modules/.bin/testcafe 'chrome --incognito' e2e/passing.e2e-spec.ts

But when tried to find the app.ts code in the browser to see if it was modified, there was no app.ts only the Angular compiled js,
I'm not familiar with the project config and can't explain why on my chrome in dev mode the code is shifted with sourcemaps but in the testcafe chrome there's no mention to it,
I just need a starter repo with as app bundled after the emitted js by tsc was of es2020..
the issue is in the way testcafe-hammerhead does the transformation

I'll open a mirroring issue to the testcafe-hammerhead repo as well

[LironHazan]

Actually this issue seems related --> DevExpress/testcafe-hammerhead#2714

[miherlosev]

Hi @LironHazan

You are right. This issue is a duplicate of the following one: DevExpress/testcafe-hammerhead#2714.

[AlexanderZhig]

Hi guys!
I take TC version 1.18.6, that uses testcafe-hammerhead": "24.5.18" and the problem is still present:
I get the following code
d=(t&&t["function.from"])??null
converted to
d=t&&t["function.from"]??null
that leads to
Uncaught SyntaxError: Unexpected token '??'

[miherlosev]

Hi @AlexanderZhig,

See the future updates related to this issue at #6995.

[JSteunou]

@miherlosev it seems that Optional Chaining is not supported yet :(

[Aleksey28]

Hi @JSteunou,

As far as I understand, you created a new issue for your case. Let us continue our conversation in this new issue.