Webpack Compilation Error:

[mrkamel]

After installing cypress-playback according to the README, besides the fact that recent cypress versions no longer seem to support the cypress/plugins approach, but rather want setupNodeEvents within cypress.config.ts (see https://docs.cypress.io/guides/references/migration-guide#Plugins-File-Removed) we get

Error: Webpack Compilation Error
./node_modules/@oreillymedia/cypress-playback/commands/index.js 203:27
Module parse failed: Unexpected token (203:27)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
|         let originalRequestData = null;
>         if (typeof options?.rewriteOrigin === 'string') {
|           originalRequestData = {
|             url: req.url,
 @ ./node_modules/@oreillymedia/cypress-playback/addCommands.js 1:14-44
 @ ./cypress/support/commands.ts
 @ ./cypress/support/e2e.ts

... which looks like the es6 features make webpack unhappy. We are using cypress 11.1.0, but also tried out 12.6.0 with same outcome. We are using typescript. I tried to use a custom webpack preprocessor with cypress which is quite fiddly and also didn't help as i ran into other confusing issues then. Also tried to change cypress/support/commands.ts to commands.js, but didn't help as well.

Do you have any advice how to fix it? Thanks in advance.

Environment

• Cypress Version: 11.1.0 and 12.6.0

[DigTheDoug]

Hi @mrkamel thanks for the report. It looks likes it's failing to compile because of the optional chaining (that ?. part) in that line

if (typeof options?.rewriteOrigin === 'string') {

I assume you're using webpack 4? We aren't using TypeScript (we're using Babel), but I think this is the specific issue that likely applies. You may be able to hopefully solve it by setting your target to es2019.

Also thanks for the note about the README still referencing out of date Cypress config, we'll update that as well.

[mrkamel]

Thanks for the quick answer and help. I already tried changing the target to various values, including ES2019, but it unfortunately didn't help. Outcome is exactly the same.

[DigTheDoug]

Assuming you're using webpack 4 and if upgrading to webpack 5 isn't possible for you at the moment, you may need to force the later version of acorn like mentioned in this comment from that issue.

[luoyinong]

you can add preprocessor like this
https://github.com/bahmutov/cypress-esbuild-preprocessor
it solve my problem

[layerssss]

you can add preprocessor like this https://github.com/bahmutov/cypress-esbuild-preprocessor it solve my problem

Also ran into this. I setup cypress for without a preprocessor (e.g webpack). So the error was thrown from cypress's builtin webpack config which isn't handling conditional chaining. The above solution adding cypress-esbuild-preprocessor helped.

[DigTheDoug]

Closing with provided solution above, reopen if issue returns and this fix does not work!