fix(webpack-preprocessor): cleanseError compatability with error objects

[iFaxity]

User facing changelog

Using @cypress/webpack-preprocessor with webpack v5 causes plugin to crash when error is outputted as an Error object instead of the expected string.

Additional details

This fixes an error in which errors outputted by webpack v5 are not strings but Error objects. This prevents any kind of error message being shown to the user, instead outputting an error from the webpack-preprocessor package.

How has the user experience changed?

This results in the error message changing from this:

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:      6.2.0                                                                            │
  │ Browser:      Chrome 87                                                                        │
  │ Specs:        1 found (bootstrap.ts)                                                           │
  │ Searched:     cypress/integration/bootstrap.ts                                                 │
  │ Experiments:  experimentalFetchPolyfill=true                                                   │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────
                                                                                                    
  Running:  bootstrap.ts                                                                    (1 of 1)

The following error was thrown by a plugin. We stopped running your tests because a plugin crashed. Please check your plugins file (`/Users/runner/work/kirei/kirei/cypress/plugins/index.js`)

TypeError: err.replace is not a function
    at cleanseError (/Users/runner/work/repo/repo/node_modules/@cypress/webpack-preprocessor/dist/index.js:272:16)
    at Array.map (<anonymous>)
    at handle (/Users/runner/work/repo/repo/node_modules/@cypress/webpack-preprocessor/dist/index.js:175:22)
    at finalCallback (/Users/runner/work/repo/repo/node_modules/webpack/lib/Compiler.js:388:32)
    at /Users/runner/work/repo/repo/node_modules/webpack/lib/Compiler.js:452:17
    at /Users/runner/work/repo/repo/node_modules/webpack/lib/HookWebpackError.js:69:3
Opening `/dev/tty` failed (6): Device not configured
    at Hook.eval [as callAsync] (eval at create (/Users/runner/work/repo/repo/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/runner/work/repo/repo/node_modules/tapable/lib/Hook.js:18:14)
    at Cache.storeBuildDependencies (/Users/runner/work/repo/repo/node_modules/webpack/lib/Cache.js:122:37)
    at /Users/runner/work/repo/repo/node_modules/webpack/lib/Compiler.js:448:19
    at Hook.eval [as callAsync] (eval at create (/Users/runner/work/repo/repo/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/runner/work/repo/repo/node_modules/tapable/lib/Hook.js:18:14)
    at /Users/runner/work/repo/repo/node_modules/webpack/lib/Compiler.js:445:23
    at Compiler.emitRecords (/Users/runner/work/repo/repo/node_modules/webpack/lib/Compiler.js:820:39)
    at /Users/runner/work/repo/repo/node_modules/webpack/lib/Compiler.js:437:11
    at /Users/runner/work/repo/repo/node_modules/webpack/lib/Compiler.js:802:14
    at Hook.eval [as callAsync] (eval at create (/Users/runner/work/repo/repo/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/runner/work/repo/repo/node_modules/tapable/lib/Hook.js:18:14)
    at /Users/runner/work/repo/repo/node_modules/webpack/lib/Compiler.js:799:27
    at /Users/runner/work/repo/repo/node_modules/neo-async/async.js:2818:7
    at done (/Users/runner/work/repo/repo/node_modules/neo-async/async.js:3522:9)
    at Hook.eval [as callAsync] (eval at create (/Users/runner/work/repo/repo/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)

To the more interesting and helpful:

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:      5.3.0                                                                            │
  │ Browser:      Electron 83 (headless)                                                           │
  │ Specs:        1 found (bootstrap.ts)                                                           │
  │ Searched:     cypress/integration/bootstrap.ts                                                 │
  │ Experiments:  experimentalFetchPolyfill=true                                                   │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────
                                                                                                    
  Running:  bootstrap.ts                                                                    (1 of 1)

Oops...we found an error preparing this test file:

  cypress/integration/bootstrap.ts

The error was:

Error: Webpack CompLooked for and couldn't find the file at the following paths:resolve 'element/src/queue' in '/e2e/cypress/integration/element'

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.

PR Tasks

No tasks applicable.

[cypress-bot]

Thanks for taking the time to open a PR!

• Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.
• Become familiar with the Code Review Checklist for guidelines on coding standards and what needs to be done before a PR can be merged.

[CLAassistant]

All committers have signed the CLA.

[jennifer-shehane]

@iFaxity Could you write a test for this change? We have some unit and e2e tests in this plugin you can run by running yarn test in this package.

[iFaxity]

Done! Also added webpack ^5.0.0 to peerDependencies so npm v7 doesn't error out when trying to install the package.

Dismissing my review for technical review.

[jennifer-shehane]

@dmtrKovalenko had previously looked into Webpack 5 support, not sure if this addresses everything in #8900 so will let him followup with review.

[dmtrKovalenko]

The problem of this concrete PR is that it's not really use webpack v5 to run the tests. (lock file not updated)

We already have a #8929 pr for these changes that probably can already be revisited, I'll take care on it, that implements all the required fixes for webpack v5.

[iFaxity]

@dmtrKovalenko Yes, missed that pull request, the same fix is implemented in the commit d2d95b2, closing this.

[dmtrKovalenko]

@iFaxity thank you for your work! 🙏