CYPRESS REMIX 错误：Webpack 编译错误

Question

我目前使用 Remix 的独立堆栈，但尝试使用 cypress 运行测试时，在 cypress 浏览器中向我发送了该错误，有人有类似的问题吗？我从头开始使用独立堆栈

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

这是完整的错误。

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

感谢@R\xc3\xa9miPeron 发现问题。

\n

这是我用来解决问题的指南：

\n

检查修复情况

\n

首先检查问题是否已修复，然后转到https://github.com/testing-library/cypress-testing-library并查找高于 的版本号8.0.3。这个问题可能会在下一个版本中得到修复。

\n

在修复出现之前解决

\n

具体解决步骤为：

\n

\n

• 关闭应用程序和 Cypress（如果正在运行）

  \n
\n

• 转到文件夹/remix-indie-stack/node_modules/@testing-library/cypress/node_modules（/remix-indie-stack项目的根文件夹在哪里）

  \n
\n

• 重命名或删除子文件夹@testing-library

  \n
\n

• 返回项目文件夹

  \n
\n

• 安装旧版本@testing-library/dom

  \n
  \n

  • npm install --save-dev @testing-library/dom@8.17.1

    \n
  \n

  • 或者yarn add -D @testing-library/dom@8.17.1

    \n
  \n
  \n
\n

\n

Answer 2

更新模块时我遇到了同样的问题。

似乎 @testing-library/dom (8.18.0) 的最新更新正在使用 cypress 和 remix 创建错误。您应该恢复到版本 8.17.1。

可能链接到此问题：https://github.com/testing-library/dom-testing-library/issues/1169