Error: Webpack Compilation Error: Module parse failed: Unexpected token (151:33)

[segevfiner]

Before creating an issue, make sure to have setup the projects with the 3 steps provided in the README. You can also verify the examples folder and check if there is already an application using a similar setup to yours.

What does not work?

Error: Webpack Compilation Error
./node_modules/.pnpm/lighthouse@9.6.8/node_modules/lighthouse/lighthouse-core/gather/connections/connection.js 151:33
Module parse failed: Unexpected token (151:33)
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
|       // In DevTools we receive responses to commands we did not send which we cannot act on, so we
|       // just log these occurrences.
>       const error = object.error?.message;
|       log.formatProtocol(`disowned method <= browser ${error ? 'ERR' : 'OK'}`,
|           {method: 'UNKNOWN', params: error || object.result}, 'verbose');
 @ ./node_modules/.pnpm/lighthouse@9.6.8/node_modules/lighthouse/lighthouse-core/gather/connections/cri.js 8:19-45
 @ ./node_modules/.pnpm/lighthouse@9.6.8/node_modules/lighthouse/lighthouse-core/index.js
 @ ./node_modules/.pnpm/@cypress-audit+lighthouse@1.3.1/node_modules/@cypress-audit/lighthouse/src/task.js
 @ ./node_modules/.pnpm/@cypress-audit+lighthouse@1.3.1/node_modules/@cypress-audit/lighthouse/index.js
 @ ./cypress/support/commands.ts
 @ ./cypress/support/e2e.ts
    at Watching.handle [as handler] (/Users/segevfiner/Library/Caches/Cypress/12.2.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-preprocessor/dist/index.js:231:23)
    at /Users/segevfiner/Library/Caches/Cypress/12.2.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:99:9
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/segevfiner/Library/Caches/Cypress/12.2.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/segevfiner/Library/Caches/Cypress/12.2.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:154:20)
    at Watching._done (/Users/segevfiner/Library/Caches/Cypress/12.2.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:98:28)
    at /Users/segevfiner/Library/Caches/Cypress/12.2.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:73:19
    at Compiler.emitRecords (/Users/segevfiner/Library/Caches/Cypress/12.2.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:499:39)
    at /Users/segevfiner/Library/Caches/Cypress/12.2.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:54:20
    at /Users/segevfiner/Library/Caches/Cypress/12.2.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:485:14
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/segevfiner/Library/Caches/Cypress/12.2.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/segevfiner/Library/Caches/Cypress/12.2.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/segevfiner/Library/Caches/Cypress/12.2.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:482:27
    at /Users/segevfiner/Library/Caches/Cypress/12.2.0/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:2818:7
    at done (/Users/segevfiner/Library/Caches/Cypress/12.2.0/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:3522:9)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/segevfiner/Library/Caches/Cypress/12.2.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/segevfiner/Library/Caches/Cypress/12.2.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/segevfiner/Library/Caches/Cypress/12.2.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:464:33
    at /Users/segevfiner/Library/Caches/Cypress/12.2.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:143:16
    at /Users/segevfiner/Library/Caches/Cypress/12.2.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:143:16
    at /Users/segevfiner/Library/Caches/Cypress/12.2.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:61:14
    at FSReqCallback.oncomplete (node:fs:192:23)

How to reproduce? Just the basic setup in the docs with a new create-vue based project.

Expected behavior It works...

Screenshots / Animated Gifs

Environment (please complete the following information):

• OS: macOS 12.6.2
• Chrome version: 108.0.5359.124
• Cypress version: 12.2.0

Any other information that may help fixing the issue? lighthouse might have introduced syntax that webpack can't parse by default (Optional Chaining), and cypress didn't configure webpack to parse JS files with babel in node_modules...

[lmiller1990]

Hi... bit late, but you can solve this: https://github.com/cypress-io/cypress/issues/26092#issuecomment-1469321030

Cypress ships webpack 4, it's pretty old - updating to the latest version of the preprocessor and webpack can solve this.

[mfrachet]

thanks, closing the issue then 🙏🏻