Optional chaining isn't working with `next.js`

Current behavior

If the test code contains optional chaining, the tester fails to run.

Error: Webpack Compilation Error
./cypress/integration/sandbox.test.ts 5:25
Module parse failed: Unexpected token (5:25)
File was processed with these loaders:
 * C:\Users\maple\AppData\Local\Cypress\Cache\7.5.0\Cypress\resources\app\packages\server\node_modules\ts-loader\index.js
You may need an additional loader to handle the result of these loaders.
|     it('fails', () => {
|         let something;
>         expect(something?.length).to.equal(5);
|     });
| });
    at Watching.handle [as handler] (C:\Users\maple\AppData\Local\Cypress\Cache\7.5.0\Cypress\resources\app\packages\server\node_modules\@cypress\webpack-preprocessor\dist\index.js:172:23)
    at C:\Users\maple\AppData\Local\Cypress\Cache\7.5.0\Cypress\resources\app\packages\server\node_modules\webpack\lib\Watching.js:99:9
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\maple\AppData\Local\Cypress\Cache\7.5.0\Cypress\resources\app\packages\server\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\maple\AppData\Local\Cypress\Cache\7.5.0\Cypress\resources\app\packages\server\node_modules\tapable\lib\Hook.js:154:20)
    at Watching._done (C:\Users\maple\AppData\Local\Cypress\Cache\7.5.0\Cypress\resources\app\packages\server\node_modules\webpack\lib\Watching.js:98:28)
    at C:\Users\maple\AppData\Local\Cypress\Cache\7.5.0\Cypress\resources\app\packages\server\node_modules\webpack\lib\Watching.js:73:19
    at Compiler.emitRecords (C:\Users\maple\AppData\Local\Cypress\Cache\7.5.0\Cypress\resources\app\packages\server\node_modules\webpack\lib\Compiler.js:499:39)
    at C:\Users\maple\AppData\Local\Cypress\Cache\7.5.0\Cypress\resources\app\packages\server\node_modules\webpack\lib\Watching.js:54:20
    at C:\Users\maple\AppData\Local\Cypress\Cache\7.5.0\Cypress\resources\app\packages\server\node_modules\webpack\lib\Compiler.js:485:14
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\maple\AppData\Local\Cypress\Cache\7.5.0\Cypress\resources\app\packages\server\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\maple\AppData\Local\Cypress\Cache\7.5.0\Cypress\resources\app\packages\server\node_modules\tapable\lib\Hook.js:154:20)
    at C:\Users\maple\AppData\Local\Cypress\Cache\7.5.0\Cypress\resources\app\packages\server\node_modules\webpack\lib\Compiler.js:482:27
    at C:\Users\maple\AppData\Local\Cypress\Cache\7.5.0\Cypress\resources\app\packages\server\node_modules\neo-async\async.js:2818:7
    at done (C:\Users\maple\AppData\Local\Cypress\Cache\7.5.0\Cypress\resources\app\packages\server\node_modules\neo-async\async.js:3522:9)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\maple\AppData\Local\Cypress\Cache\7.5.0\Cypress\resources\app\packages\server\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\maple\AppData\Local\Cypress\Cache\7.5.0\Cypress\resources\app\packages\server\node_modules\tapable\lib\Hook.js:154:20)

Desired behavior

Should allow to run the test without any additional configurations.

This seems to an issue coming from webpack and it has been resolved from a version.

Test code to reproduce

1. npm install cypress
2. npx cypress open
3. Have the below in the testing code and run it,.

describe('Optional chaining', () => {
  it('fails', () => {
    let something: string[] | undefined;

    expect(something?.length).to.equal(5);
  });
});

Not forking or creating a repo for repro because it seems that the source of the problem is bundled webpack.

Versions

Cypress package version: 7.5.0
Cypress binary version: 7.5.0
Electron version: 12.0.0-beta.14
Bundled Node version:
14.15.1

Obtained from cypress --version.

[karlhorky]

No worries, glad to document this for anyone running into this.

Other than updating the webpack version, which seems like a non trivial task (for whatever reason), based on your research what’s the next best work-around? Simply set es2019?

For now, I think there are two main workarounds for the problem:

1. In your cypress/tsconfig.json file, set compilerOptions.target to es2019 and then set compilerOptions.lib to an array including es2022, dom and dom.iterable (and any other lib values that your project needs) - as I mentioned in my last Workaround comment above

   Although a maximum compilerOptions.target of es2019 is supported, higher values for compilerOptions.lib are still supported

2. Installing and configuring the extra dependencies @cypress/webpack-preprocessor, ts-loader and webpack in order to have more capabilities, as mentioned in Zach’s comment above

[ZachJW34]

Ahh I see, I didn’t have all the context around this issue and was assuming this was a problem with CT. There should be a solution by importing and modifying the options for @cypress/webpack-preprocessor, you should be able to configure ts-loader to point to a custom tsconfig file. Haven’t tried it and would need to dig into it but I’ll try and find time to get something running.