ES2020 not supported when using Angular 15

[AStoker]

Current behavior

Private fields have been supported by both Typescript and Javascript for a while now. However, when I try to use private fields inside my project, running cypress gives the error:

Module parse failed: Unexpected character '#'

The error spawns from

AppData/Local/Cypress/Cache/12.10.0/Cypress/resources/app/node_modules/@packages/server/node_modules/ts-loader/index.js
...
AppData\Local\Cypress\Cache\12.10.0\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-preprocessor\dist\index.js:212:23

The code it's failing on looks like this:

export class Interval {
  // Private fields
  #hours: number;
  #minutes: number;
  #seconds: number;
   ...

This project is created from Nx, and is the generic Angular application with Cypress. I created a simple repro repo here: https://github.com/AStoker/cypress-modern-es-tests

Desired behavior

Cypress should support private fields.

Test code to reproduce

Here is a repro: https://github.com/AStoker/cypress-modern-es-tests

Cypress Version

12.10.0

Node version

18.15.0

Operating System

Windows 11

Debug Logs

No response

Other

No response

[AStoker]

Additional details. Attempted to make basic angular 14 project with cypress. That succeeded. Then upgraded to angular 15, and now it breaks with the same problem.
https://github.com/AStoker/angular-cypress-test

[AStoker]

Some more details. My guess it revolves around whatever Cypress is using to read the output of the project. If you change the tsconfig target to ES2020 (rather than the updated ES2022 that comes default with Angular 15), things start working again.

[AStoker]

Alas, spoke too soon. As even though I changed the target and that resolved the private fields, optional chaining still fails. Updating the repo to show this.

[jordanpowell88]

Thanks @AStoker for creating the issue and providing the reproducible repo. I'm able to reproduce this issue as well using your example repo. We will see what needs to be done to support this

[AStoker]

Adding details for others who might be experiencing the issue. Part of the issue seems to be a bug in an older version of ts-loader (TypeStrong/ts-loader#1289).
A temporary workaround for now is to downgrade your tsconfig target down to ES2019 so that things get properly transpiled to a version ts-loader can work with.