赛普拉斯抱怨在开发中工作的 Pdfjs-dist 的 Webpack 构建

Question

我已经使用 npm 安装版本的pdfjs-dist 几个星期了，在 Webpack ES6 环境中（其工作细节in this older SO question，今天更新），其中 E2E 测试是使用 Cypress 执行的。昨天 Cypress 停止工作。

奇怪的是 Cy 错误：

Error: Webpack Compilation Error
./node_modules/pdfjs-dist/build/pdf.worker.js (./node_modules/worker-loader/dist/cjs.js?esModule=false&filename=[name].js!./node_modules/pdfjs-dist/build/pdf.worker.js)
Module build failed (from ./node_modules/worker-loader/dist/cjs.js):
TypeError: Cannot read property 'tap' of undefined
 @ ./node_modules/pdfjs-dist/webpack.js 19:20-100
 @ ./src/js/select/views/pdfViews.js
 @ ./src/js/select/views/navbarViews.js
 @ ./src/js/select/utils/DOMutils.js
 @ ./src/js/common/texts/navbars/selectTxt.js
 @ ./cypress/support/KJIcommands/skipRep.js
 @ ./cypress/integration/step1/301-show--lists.spec.js
    at Watching.handle [as handler] (/home/giampaolo/.cache/Cypress/8.2.0/Cypress/resources/app/packages/server/node_modules/@cypress/webpack-preprocessor/dist/index.js:176:23)
    at /home/giampaolo/.cache/Cypress/8.2.0/Cypress/resources/app/packages/server/node_modules/webpack/lib/Watching.js:99:9
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/giampaolo/.cache/Cypress/8.2.0/Cypress/resources/app/packages/server/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/home/giampaolo/.cache/Cypress/8.2.0/Cypress/resources/app/packages/server/node_modules/tapable/lib/Hook.js:154:20)
    at Watching._done (/home/giampaolo/.cache/Cypress/8.2.0/Cypress/resources/app/packages/server/node_modules/webpack/lib/Watching.js:98:28)
    at /home/giampaolo/.cache/Cypress/8.2.0/Cypress/resources/app/packages/server/node_modules/webpack/lib/Watching.js:73:19
    at Compiler.emitRecords (/home/giampaolo/.cache/Cypress/8.2.0/Cypress/resources/app/packages/server/node_modules/webpack/lib/Compiler.js:499:39)
    at /home/giampaolo/.cache/Cypress/8.2.0/Cypress/resources/app/packages/server/node_modules/webpack/lib/Watching.js:54:20
    at /home/giampaolo/.cache/Cypress/8.2.0/Cypress/resources/app/packages/server/node_modules/webpack/lib/Compiler.js:485:14
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/giampaolo/.cache/Cypress/8.2.0/Cypress/resources/app/packages/server/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/home/giampaolo/.cache/Cypress/8.2.0/Cypress/resources/app/packages/server/node_modules/tapable/lib/Hook.js:154:20)
    at /home/giampaolo/.cache/Cypress/8.2.0/Cypress/resources/app/packages/server/node_modules/webpack/lib/Compiler.js:482:27
    at /home/giampaolo/.cache/Cypress/8.2.0/Cypress/resources/app/packages/server/node_modules/neo-async/async.js:2818:7
    at done (/home/giampaolo/.cache/Cypress/8.2.0/Cypress/resources/app/packages/server/node_modules/neo-async/async.js:3522:9)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/giampaolo/.cache/Cypress/8.2.0/Cypress/resources/app/packages/server/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/home/giampaolo/.cache/Cypress/8.2.0/Cypress/resources/app/packages/server/node_modules/tapable/lib/Hook.js:154:20)

Cypress 似乎指出了 Webpack 中的一个错误，好像编译代码不能正常工作，但应用程序没有显示出任何受苦的迹象，这是它的编译报告：

> webpack-dev-server --mode development

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from ./dist
(node:55249) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
ℹ ｢wdm｣: assets by path *.js 4.07 MiB
  asset pdf.worker.js 1.7 MiB [emitted]
  asset select.js 1.19 MiB [emitted] (name: select)
  asset show.js 1.18 MiB [emitted] (name: show)
assets by path ../../../templates/docs/*.html 29.4 KiB
  asset ../../../templates/docs/dist-select.html 16.8 KiB [emitted]
  asset ../../../templates/docs/dist-show.html 12.6 KiB [emitted]
runtime modules 4.2 KiB 14 modules
modules by path ./src/js/ 286 KiB
  modules by path ./src/js/show/ 79.3 KiB 41 modules
  modules by path ./src/js/select/ 194 KiB 31 modules
  modules by path ./src/js/common/ 12.2 KiB 4 modules
modules by path ./node_modules/ 713 KiB
  cacheable modules 713 KiB 30 modules
  ./node_modules/webpack/hot/ sync nonrecursive ^\.\/log$ 170 bytes [built] [code generated]
  ./node_modules/worker-loader/dist/cjs.js?esModule=false&filename=[name].js!./node_modules/pdfjs-dist/build/pdf.worker.js 106 bytes [not cacheable] [built] [code generated]
canvas (ignored) 15 bytes [built] [code generated]
fs (ignored) 15 bytes [built] [code generated]
zlib (ignored) 15 bytes [optional] [built] [code generated]
http (ignored) 15 bytes [built] [code generated]
https (ignored) 15 bytes [built] [code generated]
url (ignored) 15 bytes [built] [code generated]
webpack 5.49.0 compiled successfully in 3598 ms
ℹ ｢wdm｣: Compiled successfully.

我已经四处寻找了几个小时，但找不到任何提示。非常感谢一些指针。

我反复看到的唯一解决方案似乎是尝试恢复到较旧的pdfjs 版本，如果我没有其他解决方案，我可以尝试那个。不过我并不倾向于，因为它已经完美地工作了一段时间，而且它似乎更像是赛普拉斯的问题而不是 Webpack/pdfjs 的问题，并且代码一直运行顺利。然而我也需要我的测试：P

提前致谢。

编辑： 我返回了几个提交，其中代码仍在正确测试，第一个显示错误的提交有一个不同的提交：

An uncaught error was detected outside of a testfailed
No commands were issued in this test.
TypeError
The following error originated from your test code, not from Cypress.

  > Cannot read property 'dataset' of null

When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.

Cypress could not associate this error to any specific test.

We dynamically generated a new test to display this failure.
src/js/show/utils/base-show.js:31:49
  29 | export const showElements = {
  30 | 
> 31 |   myPdfDoc: document.querySelector('#script-1').dataset.mypdfdoc,
     |                                                 ^
  32 | 
  33 | }
  34 |  
View stack trace
 Print to console
    at Object../src/js/show/utils/base-show.js (webpack:///./src/js/show/utils/base-show.js:31:49)
    at __webpack_require__ (webpack:///webpack/bootstrap:19:1)
    at Object../src/js/show/UI/selections.js (webpack:///./src/js/show/UI/selections.js:1:1)
    at __webpack_require__ (webpack:///webpack/bootstrap:19:1)
    at Object../src/js/common/texts/navbars/selectTxt.js (webpack:///./src/js/common/texts/navbars/selectTxt.js:3:1)
    at __webpack_require__ (webpack:///webpack/bootstrap:19:1)
    at Object../cypress/support/KJIcommands/skip.js (webpack:///./cypress/support/KJIcommands/skip.js:1:1)
    at __webpack_require__ (webpack:///webpack/bootstrap:19:1)
    at Object../cypress/support/commands.js (webpack:///./cypress/support/commands.js:32:1)
    at __webpack_require__ (webpack:///webpack/bootstrap:19:1)
From previous event:
    at runScriptsFromUrls (http://localhost:34631/__cypress/runner/cypress_runner.js:164932:98)
    at Object.runScripts (http://localhost:34631/__cypress/runner/cypress_runner.js:164946:11)
    at $Cypress.onSpecWindow (http://localhost:34631/__cypress/runner/cypress_runner.js:153894:19)

第二种错误与第一种错误的共同点是没有执行测试中的代码，它是在尝试之前生成的。它说它“动态生成了一个测试”以显示失败，但如果它没有访问应用程序，它似乎很明显找不到 DOM 元素，不是吗？

这出现在控制台中，尽管它可能不相关。它应该连接到带有源映射的 Firefox 错误，这是我在开发过程中经常看到的：

DevTools failed to load source map: Could not load content for http://localhost:34631/__cypress/runner/popper.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Answer 1

在 8.3.1 之后很快在 cypress 中修复（我验证了这在 WDS 4 上失败，但在 WDS 3 上工作，两者都使用 WP4）。

现在，只需降级到 WDS 3。

见https://github.com/cypress-io/cypress/issues/17846和https://github.com/cypress-io/cypress/pull/17918