CYPRESS REMIX Error: Webpack Compilation Error

Question

Im currently using the indie Stack from Remix, but trying to run the test with cypress send me that error in the browser of cypress, does anyone have a similiar issue? im using the indie stack from scratch

https://github.com/remix-run/indie-stack

this is the complete error.

Error: Webpack Compilation Error
./node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js 429:27
Module parse failed: Unexpected token (429: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
|   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- types are not aware of older browsers that don't implement `labels`
|   if (element.labels !== undefined) {
>     return element.labels ?? [];
|   }
| 
 @ ./node_modules/@testing-library/cypress/dist/index.js 9:11-42
 @ ./node_modules/@testing-library/cypress/dist/add-commands.js
 @ ./node_modules/@testing-library/cypress/add-commands.js
 @ ./cypress/support/e2e.ts
    at handle (/Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-preprocessor/dist/index.js:180:23)
    at finalCallback (/Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:257:39)
    at /Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:306:14
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:304:22
    at Compiler.emitRecords (/Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:499:39)
    at /Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:298:10
    at /Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:485:14
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:482:27
    at /Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:2818:7
    at done (/Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:3522:9)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:464:33
    at /Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:143:16
    at /Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:143:16
    at /Users/poolortega/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:61:14
    at FSReqCallback.oncomplete (node:fs:188:23)

This occurred while Cypress was compiling and bundling your test code. This is usually caused by:

- A missing file or dependency
- A syntax error in the file or one of its dependencies

Fix the error in your code and re-run your tests.

Answer 1

I had the same issue when updating my modules.

It seems that the latest update from @testing-library/dom (8.18.0) is creating the error with cypress and remix. You should revert back to version 8.17.1.

May be link to this issue : https://github.com/testing-library/dom-testing-library/issues/1169