Optional chaining (?.) is not supported

[jamesdsmyth]

Current behavior

Currently I am seeing an issue when running a test where a function i am testing contains optional chaining. What do I need to do to allow optional chaining, be it a loader or a config setting.

This Works
if (error && error.errors.length)

This does not work
if (error.errors?.length)

Error: Webpack Compilation Error
./src/helpers/errors.ts 18:21
Module parse failed: Unexpected token (18:21)
File was processed with these loaders:
 * ../../../Library/Caches/Cypress/5.6.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
|  */
| export function parseErrorMessages(error, t) {
>     if (error.errors?.length)
|         return error.errors.map(suberror => localizeError(suberror, t));
|     return [localizeError(error, t)];
 @ ./cypress/integration/helpers/errors.ts 1:0-47 14:15-28

Desired behavior

To be able to use optional chaining and allow the Cypress tests to run without fail.

Versions

5.6.0

[jreyes33]

Are your targeting es2020 or esnext in your tsconfig.json? I was seeing the same error and fixed it by targeting es2019 instead.

[jamesdsmyth]

@jreyes33 this worked for me, thank you

[obedparla]

Is there any other solution to this? I'm running esnext on my config but still get the error 🤔

[yann-combarnous]

@jreyes33 , @jamesdsmyth, this did not work for me on Cypress 6.5.0, could you share your sample tsconfig.json ?

[gwpetersen]

yeah this is not working for me either @jreyes33 @jamesdsmyth I'm using Cypress 6.5.0 can you share your tsconfig.json file?

[krizman]

@yann-combarnous, @gwpetersen
This is the tsconfig files that I have that works with Cypress 6.5.0:

project's root tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ES2020",
    "sourceMap": true,
    ...
    },
  "include": [
    "src/**/*.ts",
    "src/**/*.vue",
    "tests/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "types",
    "tests/e2e/**/*.ts"
  ]
}

Cypress tsconfig.json:

{
  "extends": "../../tsconfig",
  "compilerOptions": {
    "sourceMap": false,
    "target": "ES2019"
  },
  "include": ["**/*.ts"],
  "exclude": []
}

The mentioned compilation error is thrown when targeting ES2020 or ESNext.

I am using some common modules and dependencies in my E2E tests from the parent project (that can't be avoided) and would really prefer if it would be compiled using the same ES version.

[The-Code-Monkey]

Is there a better solution as changing the es version isnt a good solution in my eyes

[mjustin]

Is there a better solution as changing the es version isnt a good solution in my eyes

Should there be an "Optional chaining (?.) is not supported in ES2020" issue created, maybe?

[mlegait]

IMO targeting an older version is not a fix but a workaround.

[folmert]

I was seeing the same error and fixed it by targeting es2019 instead.

Optional chaining was added in es2020. How come setting compilerOptions.target to es2019 fixes it?

Edit: anyway, compilerOptions.target seems to make no difference for me and optional chaining works but not when used with arrays, i.e. foo?.bar?.[0] (in Vue3 template).

[nagash77]

@folmert please open a new issue with a reproducible example and the Cypress team will be happy to investigate.

[lmiller1990]

This is finally going to be fixed in core, probably Cy 13 #27438