Optional chaining (?.) is not supported with "target": "esnext"

[mlegait]

Current behavior

It's impossible to use optional chaining if "target": "esnext" is configured in tsconfig.json.

In fact, I would like to reopen the issue #9298.

In tsconfig.json:

"target": "esnext",

In spec:

cy.visit(objectWithUrlInside?.url);

Error:

Webpack Compilation Error
./cypress/integration/spec.ts 7:37
Module parse failed: Unexpected token (7:37)
File was processed with these loaders:
 * ../../../Users/mlegait/AppData/Local/Cypress/Cache/9.5.2/Cypress/resources/app/packages/server/node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
|             url: "https://example.cypress.io",
|         };
>         cy.visit(objectWithUrlInside?.url);
|     });
| });
GET /__cypress/tests?p=cypress%5Cintegration%5Cspec.ts 200 22.363 ms - -

Desired behavior

We should be able to use esnext as target with Cypress and have optional chaining supported.

Test code to reproduce

https://github.com/mlegait/cypress-test-tiny

Cypress Version

9.5.2

Other

No response

[emilyrohrbough]

@mlegait Thank you for opening an issue.

Cypress expects a preprocessor to prepare & transpile the pluginsFile, supportFile and test files within a project. If a preprocessor has not been registered to the file:preprocessor event within a project's pluginFile.Cypress uses the @cypress/webpack-batteries-included-preprocessor preprocessor which extends the @cypress/webpack-preprocessor.

If the default webpack configuration provided in @cypress/webpack-batteries-included-preprocessor is not needing your project's needs, an option is to define the webpack configuration needed and providing it to the @cypress/webpack-preprocessor.

Another option is to see if an existing community preprocessor meets your needs: https://www.npmjs.com/search?q=cypress-*-preprocessor -- though taking a quick glance I'm not sure if I'm noticing one outright.

[mjustin]

The same issue appears to occur when the target is "ES2020". This is discussed in the closed issue:

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

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

[mlegait]

Thank you @emilyrohrbough for the complete explanation. So I guess I'll stay with es2019.

[karlhorky]

@lmiller1990 @ZachJW34 any chance of supporting es2020, es2021, es2022, esnext and other newer values?

[MarcusElevait]

We recently decided to move to ESNext in our project, but unfortunately stumpled upon this here. Also moving back until this issue is fixed here.

[karlhorky]

I documented some workarounds over here: https://github.com/cypress-io/cypress/issues/16914#issuecomment-1179996139

[github-actions[bot]]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

[karlhorky]

@emilyrohrbough any plans on the radar about fixing this problem out of the box for all Cypress TypeScript users?

[nibblesnbits]

Also curious. The webpack fix kinda works, but causes a HUGE cascade of other issues requiring a ton of work. Seems like a nightmare band-aid just to support a newer ES spec.

[lmiller1990]

Comment in https://github.com/cypress-io/cypress/issues/16914

Is there anything preventing explicitly specifying ES2019 as the target in @cypress/webpack-batteries-included-preprocessor/index.js ts-loader compilerOptions?

Should we just do this? Will this fix the issue? The user in that thread says it will, and implied by @karlhorky in https://github.com/cypress-io/cypress/issues/16914#issuecomment-1179996139.

My understanding is the older version of webpack/babel Cypress ships does not understanding ?.. I'm not entirely clear on how changing the target to es2019 will fix that, though. I guess because ?. wasn't available pre es-2019? This would mean users using .js files and optional chaining would still have issues.

If this does fix it, though, I think we should make this change - there are a lot of issues around optional chaining that could be fixed.

WDYT @emilyrohrbough ?

[daniel-seitz]

Looks like its deeply related to https://github.com/webpack/webpack/issues/10227

If I see it correctly it should be fixed in webpack@5 terser@5.2.0

I'm running Cypress@12.11.0 and still have this problem. And update would be really welcome.

[meloalves]

this happened to me today, lucky I had switched to "esnext" yesterday. so it was the first thing i checked. it was an optional parameter in a class that was returning as undefined.