targeting my app to es2020 causes unexpected failures

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!

[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.

[JSteunou]

@miherlosev it seems that Optional Chaining is not supported yet 😦