WebPack Compilation Error on macOS Big Sur 11.4 on newly generated project

[dunklesToast]

Current behavior

I created a new folder, ran yarn add -D cypress, then openend cypress via ./node_modules/.bin/cypress open and clicked the todo.spec.js which was autogenerated.

Cypress threw a WebPack Compile Error:

Stack

Error: Webpack Compilation Error
./cypress/integration/1-getting-started/todo.spec.js
Module build failed (from /Users/tom/Library/Caches/Cypress/8.2.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/babel-loader/lib/index.js):
TypeError: [BABEL]: Cannot convert undefined or null to object (While processing: /Users/tom/Library/Caches/Cypress/8.2.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@babel/plugin-proposal-class-properties/lib/index.js)
    at Watching.handle [as handler] (/Users/tom/Library/Caches/Cypress/8.2.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-preprocessor/dist/index.js:176:23)
    at /Users/tom/Library/Caches/Cypress/8.2.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/webpack/lib/Watching.js:99:9
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/tom/Library/Caches/Cypress/8.2.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/tapable/lib/HookCodeFactory.js:33:10), :6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/tom/Library/Caches/Cypress/8.2.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/tapable/lib/Hook.js:154:20)
    at Watching._done (/Users/tom/Library/Caches/Cypress/8.2.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/webpack/lib/Watching.js:98:28)
    at /Users/tom/Library/Caches/Cypress/8.2.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/webpack/lib/Watching.js:73:19
    at Compiler.emitRecords (/Users/tom/Library/Caches/Cypress/8.2.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/webpack/lib/Compiler.js:499:39)
    at /Users/tom/Library/Caches/Cypress/8.2.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/webpack/lib/Watching.js:54:20
    at /Users/tom/Library/Caches/Cypress/8.2.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/webpack/lib/Compiler.js:485:14
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/tom/Library/Caches/Cypress/8.2.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/tapable/lib/HookCodeFactory.js:33:10), :6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/tom/Library/Caches/Cypress/8.2.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/tom/Library/Caches/Cypress/8.2.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/webpack/lib/Compiler.js:482:27
    at /Users/tom/Library/Caches/Cypress/8.2.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/neo-async/async.js:2818:7
    at done (/Users/tom/Library/Caches/Cypress/8.2.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/neo-async/async.js:3522:9)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/tom/Library/Caches/Cypress/8.2.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/tapable/lib/HookCodeFactory.js:33:10), :6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/tom/Library/Caches/Cypress/8.2.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/tapable/lib/Hook.js:154:20)

This happened on all Cypress Versions until 4.x. I tried the internal Electron Browser and Chromium 94.

Desired behavior

It should run the example test without a compilation error

Test code to reproduce

Create a new folder, run yarn add -D cypress and ./node_modules/.bin/cypress open. Click the todo.spec.js

Cypress Version

8.2.0

Other

Intel-Based macOS 11.4 (20F71)
Node v16.4.2 (which shouldn't matter I guess)
yarn as package manager

I also removed all Cypress Caches and tried again. Same error.

[AJ-Jambit]

Relates to #4181?

Affects me to (same version, installed with npm).

Ubuntu Linux. Same Node version.

[AJ-Jambit]

Further investigation:
If installed Cypress to /tmp/cypress_debug and executed from there, the todo.spec.js executes flawlessly.

Perhaps Cypress is interacting with something project-specific?

[AJ-Jambit]

I got a workaround!

The Node environment is controlled with .nvmrc.
Thus, switching to the system version by means of adding to cypress.json:

{
  "nodeVersion": "system"
}

seem to resolve the execution problem for me.