CODEWITHSUNDEEP
webpackcypressremix.run
Pool Ortega
Pool Ortega

Reputation: 53

CYPRESS REMIX Error: Webpack Compilation Error

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.

Upvotes: 5

Views: 2099

Answers (3)

Hassan Yamin
Hassan Yamin

Reputation: 31

@Fody - Thanks for your comment. I have been facing this issue since 3 days. your steps cleared my concern.

In my case i only tried

npm install --save-dev @testing-library/[email protected]

and it worked for me.

Upvotes: 1

Fody
Fody

Reputation: 31944

Thanks to @RémiPeron for finding the issue.

This is the guideline I used to solve:

Check for fix

First check for a fix to the problem, go to https://github.com/testing-library/cypress-testing-library and look for a release number higher than 8.0.3. This problem is likely to be fixed on the next release.

Resolve before fix appears

Specifically, the steps to resolve are:

  • close the app and Cypress if running

  • go to folder /remix-indie-stack/node_modules/@testing-library/cypress/node_modules (where /remix-indie-stack is the root folder of your project)

  • rename or delete sub-folder @testing-library

  • go back to the project folder

  • install the older version of @testing-library/dom

Upvotes: 8

R&#233;mi Peron
R&#233;mi Peron

Reputation: 71

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

Upvotes: 5

Related Questions