Error: Webpack Compilation Error ./node_modules/@testing-library/dom/dist/queries/role.js 172:112

[Barukimang]

Current behavior

Since our app update to React 18 and dependencies the tests are immediately failing with an error:

Error: Webpack Compilation Error
./node_modules/@testing-library/dom/dist/queries/role.js 172:112
Module parse failed: Unexpected token (172:112)
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

Downgrading cypress and @testing-library/jest-dom packages did not solve the issue.

See screenshot:

Desired behavior

Start the E2E tests, which you can find here

Test code to reproduce

Here is the failing test repo

Cypress Version

13.2.0

Node version

v18.14.2

Operating System

macOS 13.2.1

Debug Logs

Error: Webpack Compilation Error
./node_modules/@testing-library/dom/dist/queries/role.js 172:112
Module parse failed: Unexpected token (172:112)
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
|       }
|       if (valueText !== undefined) {
>         valueMatches && (valueMatches = (0, _allUtils.matches)((0, _roleHelpers.computeAriaValueText)(element) ?? null, element, valueText, text => text));
|       }
|       return valueMatches;
 @ ./node_modules/@testing-library/dom/dist/queries/index.js 72:12-29
 @ ./node_modules/@testing-library/dom/dist/index.js
 @ ./node_modules/@synthetixio/synpress/node_modules/@testing-library/cypress/dist/index.js
 @ ./node_modules/@synthetixio/synpress/support/index.js
 @ ./tests/e2e/support.ts
    at Watching.handle [as handler] (/Users/barukimang/Library/Caches/Cypress/12.11.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-preprocessor/dist/index.js:212:23)
    at /Users/barukimang/Library/Caches/Cypress/12.11.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:99:9
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/barukimang/Library/Caches/Cypress/12.11.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/barukimang/Library/Caches/Cypress/12.11.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:154:20)
    at Watching._done (/Users/barukimang/Library/Caches/Cypress/12.11.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:98:28)
    at /Users/barukimang/Library/Caches/Cypress/12.11.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:73:19
    at Compiler.emitRecords (/Users/barukimang/Library/Caches/Cypress/12.11.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:499:39)
    at /Users/barukimang/Library/Caches/Cypress/12.11.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:54:20
    at /Users/barukimang/Library/Caches/Cypress/12.11.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:485:14
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/barukimang/Library/Caches/Cypress/12.11.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/barukimang/Library/Caches/Cypress/12.11.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/barukimang/Library/Caches/Cypress/12.11.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:482:27
    at /Users/barukimang/Library/Caches/Cypress/12.11.0/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:2818:7
    at done (/Users/barukimang/Library/Caches/Cypress/12.11.0/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:3522:9)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/barukimang/Library/Caches/Cypress/12.11.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/barukimang/Library/Caches/Cypress/12.11.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/barukimang/Library/Caches/Cypress/12.11.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:464:33
    at /Users/barukimang/Library/Caches/Cypress/12.11.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:143:16
    at /Users/barukimang/Library/Caches/Cypress/12.11.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:143:16
    at /Users/barukimang/Library/Caches/Cypress/12.11.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:61:14
    at FSReqCallback.oncomplete (node:fs:197:23)

Other

No response

[Barukimang]

Hi all, we haven't been able to debug this issue yet. Would you have any suggestions for us?

[TheHamsterDog]

Hi, I am having the same issue. Did you guys end up finding a fix?

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

[cypress-app-bot]

This issue has been closed due to inactivity.