Cypress complains on a Webpack build of Pdfjs-dist which works in development

Question

I have been using an npm installed version of pdfjs-dist for a few weeks now, in a Webpack ES6 environment (details of its workings in this older SO question, updated today), where E2E testing is performed with Cypress. Yesterday Cypress stopped working.

The strange thing is the Cy error:

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 seems to point at an error in Webpack, as if compiling the code did not work fine, yet the applications shows no sign of suffering, and this is its compiling report:

> 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.

I have been looking around for a few hours now, but could not find a hint. Would really appreciate some pointers.

The only solution I saw repeatedly would seem to try and revert to older pdfjs versions, and in case I have no other one I may try that one. I am not inclined though, because it has been working flawlessly for some time and it seems more of a Cypress issue than a Webpack/pdfjs one, and the code keeps working smoothly. Yet I need my tests too :P

Thanks in advance.

Edit: I went back a couple of commits, where code was still testing properly, and the first commit showing an error had a different one:

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)

This second kind of error has in common with the first one that no code from the tests is executed, it is generated before even trying. It says it "dynamically generated a test" to show a failure, but if it didn't visit the app it seems obvious it could not find a DOM element, no?

This came up in the console, although it might not be relevant. It should be connected to a Firefox error with source maps, which I see often during development:

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

To be fixed soon in cypress, after 8.3.1 (I verified this fails with WDS 4 but works with WDS 3, both using WP4).

For now, just downgrade to WDS 3.

See https://github.com/cypress-io/cypress/issues/17846, and https://github.com/cypress-io/cypress/pull/17918