Webpack loader error for plugin command.js

[mrks1337]

Hello!
I just installed the cypress plugin as the README says in my React/TS project but when I am trying now to run any test, I get the following error thrown:

Error: Webpack Compilation Error
/Users/mrks/Development/project/frontend/node_modules/cypress-visual-regression/dist/command.js 43:35
Module parse failed: Unexpected token (43:35)
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
|       } else if (typeof commandOptions === "number") {
|         errorThreshold = commandOptions;
>       } else if (screenshotOptions?.errorThreshold !== void 0) {
|         errorThreshold = screenshotOptions.errorThreshold;
|       }
 @ ./support/e2e.ts 18:0-83 19:0-25
    at Watching.handle [as handler] (/Users/mrks/Library/Caches/Cypress/12.8.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-preprocessor/dist/index.js:212:23)
    at /Users/mrks/Library/Caches/Cypress/12.8.1/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:99:9
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/mrks/Library/Caches/Cypress/12.8.1/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/mrks/Library/Caches/Cypress/12.8.1/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:154:20)
    at Watching._done (/Users/mrks/Library/Caches/Cypress/12.8.1/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:98:28)
    at /Users/mrks/Library/Caches/Cypress/12.8.1/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:73:19
    at Compiler.emitRecords (/Users/mrks/Library/Caches/Cypress/12.8.1/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:499:39)
    at /Users/mrks/Library/Caches/Cypress/12.8.1/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:54:20
    at /Users/mrks/Library/Caches/Cypress/12.8.1/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:485:14
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/mrks/Library/Caches/Cypress/12.8.1/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/mrks/Library/Caches/Cypress/12.8.1/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/mrks/Library/Caches/Cypress/12.8.1/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:482:27
    at /Users/mrks/Library/Caches/Cypress/12.8.1/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:2818:7
    at done (/Users/mrks/Library/Caches/Cypress/12.8.1/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:3522:9)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/mrks/Library/Caches/Cypress/12.8.1/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/mrks/Library/Caches/Cypress/12.8.1/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/mrks/Library/Caches/Cypress/12.8.1/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:464:33
    at /Users/mrks/Library/Caches/Cypress/12.8.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:143:16
    at /Users/mrks/Library/Caches/Cypress/12.8.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:143:16
    at /Users/mrks/Library/Caches/Cypress/12.8.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:61:14
    at FSReqCallback.oncomplete (node:fs:189:23)

[area73]

@mrks1337, can you provide us with a testing environment?

Thanks !

[pankajneog]

I'm also getting the same error for javascript project. The cypress version I'm using is 12.13.0
This error is thrown after loading the spec file

Error: Webpack Compilation Error
./node_modules/cypress-visual-regression/dist/command.js 43:35
Module parse failed: Unexpected token (43:35)
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
| } else if (typeof commandOptions === "number") {
| errorThreshold = commandOptions;
} else if (screenshotOptions?.errorThreshold !== void 0) {
| errorThreshold = screenshotOptions.errorThreshold;
| }
@ ./cypress/support/e2e.js 7:4-53

[area73]

For what I see , you need to load the appropiate webpack loader

[antunespedro80]

Same problema as @pankajneog. @area73 "I need to load the appropiate webpack loader", what that means? Becuase I followed your steps described on README

[eugenet8k]

@mrks1337 it seems there is a use of the existential operator ?. in the latest version of this lib. It's a common thing, more and more NPM libraries use the latest ECMAScript features.

One solution is to make sure that your webpack babel-loader does not skip /node_modules. If you don't feel like slowing down your builds that much, you can target it specifically to include /node_modules/cypress-visual-regression