Component Commands built into angular bundle causing missing "fs" module for Plugin.

[mprice-gcmlp]

Current behavior

Currently while trying to use the cypress-delete-downloads-folder Plugin for a component test (testing export to CSV button that runs in the front end of an Angular app), we are encountering an error Cannot find module 'fs' .

When you go to start ANY component test you get this error

The /cypress/support/component.ts and/or /cypress/support/commands.ts seems to be being built as part of the Angular bundle and not as part of the cypress backend bundle like it does for e2e tests (this does work correctly for e2e tests). In the linked repo you can load up and run e2e tests just fine, only the component tests fail to load.

Desired behavior

Component tests should support plugins that use node modules.

Test code to reproduce

https://github.com/mprice-gcmlp/CypressPluginProblem/tree/master

Cypress Version

13.10.0

Node version

20.11.0

Operating System

Windows 11

Debug Logs

> npx cypress run --component

DevTools listening on ws://127.0.0.1:51053/devtools/browser/2afae301-2abe-43be-9766-0b28014562b7

====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:        13.10.0                                                                        │
  │ Browser:        Electron 118 (headless)                                                        │
  │ Node Version:   v20.11.0 (C:\Program Files\nodejs\node.exe)                                    │
  │ Specs:          1 found (app.component.cy.ts)                                                  │
  │ Searched:       **/*.cy.ts                                                                     │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────

  Running:  app.component.cy.ts                                                             (1 of 1)
asset cypress-support-file.js 4.07 MiB {cypress-support-file} [emitted] (name: cypress-support-file)
asset default-node_modules_angular_core_fesm2015_core_mjs.js 3.66 MiB {default-node_modules_angular_core_fesm2015_core_mjs} [emitted] (id hint: default)
asset polyfills.js 1.07 MiB {polyfills} [emitted] (name: polyfills)
asset cypress-entry.js 469 KiB {cypress-entry} [emitted] (name: cypress-entry)
asset styles.js 461 KiB {styles} [emitted] (name: styles)
asset runtime.js 27.9 KiB {runtime} [emitted] (name: runtime)
asset spec-0.js 27.8 KiB {spec-0} [emitted] (name: spec-0)
asset styles.css 1.06 KiB {styles} [emitted] (name: styles)
asset favicon.ico 948 bytes [emitted] [from: src/favicon.ico] [copied]
asset index.html 634 bytes [emitted]
Entrypoint polyfills 1.09 MiB = runtime.js 27.9 KiB polyfills.js 1.07 MiB
Entrypoint styles 490 KiB = runtime.js 27.9 KiB styles.css 1.06 KiB styles.js 461 KiB
Entrypoint cypress-entry 497 KiB = runtime.js 27.9 KiB cypress-entry.js 469 KiB
chunk {cypress-entry} (runtime: runtime) cypress-entry.js (cypress-entry) 158 KiB [initial] [rendered]
chunk {cypress-support-file} (runtime: runtime) cypress-support-file.js (cypress-support-file) 1.47 MiB [rendered]
chunk {default-node_modules_angular_core_fesm2015_core_mjs} (runtime: runtime) default-node_modules_angular_core_fesm2015_core_mjs.js (id hint: default) 1.3 MiB [rendered] split chunk (cache group: default)
chunk {polyfills} (runtime: runtime) polyfills.js (polyfills) 378 KiB [initial] [rendered]
chunk {runtime} (runtime: runtime) runtime.js (runtime) 7.58 KiB [entry] [rendered]
chunk {spec-0} (runtime: runtime) spec-0.js (spec-0) 23.7 KiB [rendered]
chunk {styles} (runtime: runtime) styles.css, styles.js (styles) 156 KiB (javascript) 80 bytes (css/mini-extract) [initial] [rendered]

ERROR in ./node_modules/cypress-delete-downloads-folder/src/index.js 1:22-35
Module not found: Error: Can't resolve 'fs' in 'C:\Git\CypressPluginProblem\node_modules\cypress-delete-downloads-folder\src'

2024-05-29 09:52:33: webpack compiled in 18368 ms (53ec4d5cad2e3276)


  1) An uncaught error was detected outside of a test

  0 passing (398ms)
  1 failing

  1) An uncaught error was detected outside of a test:
     Error: The following error originated from your test code, not from Cypress.

  > Cannot find module 'fs'

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.
      at webpackMissingModule (webpack://angular/./node_modules/cypress-delete-downloads-folder/src/index.js:1:30)
      at 2998 (webpack://angular/./node_modules/cypress-delete-downloads-folder/src/index.js:1:30)
      at __webpack_require__ (http://localhost:8080/__cypress/src/runtime.js:23:42)
      at 350 (webpack://angular/./cypress/support/commands.ts:39:0)
      at __webpack_require__ (http://localhost:8080/__cypress/src/runtime.js:23:42)
      at 9842 (http://localhost:8080/__cypress/src/cypress-support-file.js:61:67)
      at Function.__webpack_require__ (http://localhost:8080/__cypress/src/runtime.js:23:42)
      at _ZoneDelegate.invoke (http://localhost:8080/__cypress/src/polyfills.js:3301:26)
      at Zone.run (http://localhost:8080/__cypress/src/polyfills.js:3063:43)
      at <unknown> (http://localhost:8080/__cypress/src/polyfills.js:4204:36)

Other

No response