cypress: webpack-preprocessor cleanError throws TypeError

Getting issue with Cypress 9.0 now, with a new installation

Opened https://github.com/nrwl/nx/issues/5906 for nrwl/nx users, as I couldn’t find a way to replace cypress-webpack-preprocessor with cypress-webpack-preprocessor-v5 there.

actually I realise now I’ve edited this file directly in my node_modules folder:

node_modules/@cypress/webpack-preprocessor/dist.index.js Adding line - console.log('err = ', err); // add this line

function cleanseError(err) {
    console.log('err = ', err); // add this line
    return err.replace(/\n\s*at.*/g, '').replace(/From previous event:\n?/g, '');
}

Now running cypress I can see the typescript errors I need to fix. thankyou

Cypress webpack-preprocessor does not yet support Webpack 5 as explained in this issue: https://github.com/cypress-io/cypress/issues/8900

We released a temporary version of this package that supports webpack v5 – npmjs.com/package/cypress-webpack-preprocessor-v5

npm i cypress-webpack-preprocessor-v5

Is anyone getting this error outside of using Webpack 5? Because we will close this issue if not as it’s a duplicate of https://github.com/cypress-io/cypress/issues/8900

Cypress webpack-preprocessor does not yet support Webpack 5 as explained in this issue: #8900

We released a temporary version of this package that supports webpack v5 – npmjs.com/package/cypress-webpack-preprocessor-v5

npm i cypress-webpack-preprocessor-v5

Is anyone getting this error outside of using Webpack 5? Because we will close this issue if not as it’s a duplicate of #8900

Hi, using the cypress-webpack-preprocessor-v5 fixes the issue for me.

There is no problems with webpack@4.44.2

Please prefer thumbing up the issue over posting “+1” comments (each one of them sends unnecessary email notifications). Thanks

using nvm install 16.13.0 fixed the issue

seems was an issue with using node 17

The underlying problem here seems to be that the webpack instance started by cypress is using a flawed require.resolve algorithm. You can use cypress-webpack-preprocessor-v5 to fix the err.replace error, but the underlying issue remains where the modules required by webpack dependencies are not using the normal node resolution algorithm.

In my case, babel-loader throws an error validateOptions is not a function because it is resolving the wrong version of schema-utils. I added some logs to the top of node_modules/babel-loader/lib/index.js to prove this:

console.log(require.resolve.paths('schema-utils'));
// [
//   <rootDir>/node_modules/babel-loader/node_modules
//   <rootDir>/node_modules
//   etc.
// ]
// ^ schema-utils is installed in both places, meaning it should resolve to the
// version located at babel-loader/node_modules/schema-utils

console.log(require.resolve('schema-utils'));
// <rootDir>/node_modules/schema-utils/dist/index.js
// ^ instead, it resolves to the version in <rootDir>/node_modules/schema-utils

I’ve also seen this same issue manifest with different versions of enhanced-resolve installed in node_modules/webpack/node_modules/enhanced-resolve and node_modules/enhanced-resolve. I would not be surprised if there are other variations of the same issue.

Any updates on this ?

@rkrisztian my code is already part of the package, even the double \n 🤣

While we’re waiting for a fix, we can use patch-package with @mhamri’s code line changes, to alleviate the problem a bit (just in case you didn’t know).

Edit: I am too late with this, due to more recent releases of @cypress/webpack-preprocessor.

for god sake fix it, it’s as easy as this, this error is there since version 4

function cleanseError (err) {
  if (typeof err!=="string"){
    err= Object.values(err).join('\n\n');
  }

  return err.replace(/\n\s*at.*/g, '').replace(/From previous event:\n?/g, '');
}

and it will shows the error correctly

✨ This is an old work account. Please reference @brandonchinn178 for all future communication ✨

---

I had this problem and found out the problem was my Cypress tests written in Typescript had type errors.

How I figured this out is by adding console.log(err) before the err.replace line, which output:

{
  file: '/Users/bchinn/leapyear/leapyear-beta/auth/cypress/integration/saml.spec.ts',
  loc: '23:12-32',
  message: '\u001b[90m[tsl] \u001b[39m\u001b[1m\u001b[31mERROR\u001b[39m\u001b[22m\u001b[1m\u001b[31m in \u001b[39m\u001b[22m\u001b[1m\u001b[36m/Users/bchinn/leapyear/leapyear-beta/auth/cypress/integration/saml.spec.ts(23,13)\u001b[39m\u001b[22m\n' +
    '\u001b[1m\u001b[31m      TS2769: No overload matches this call.\u001b[39m\u001b[22m\n' +
    '\u001b[1m\u001b[31m  The last overload gave the following error.\u001b[39m\u001b[22m\n' +
    "\u001b[1m\u001b[31m    Argument of type '(res: Response) => void' is not assignable to parameter of type '(this: ObjectLike, currentSubject: Response) => void'.\u001b[39m\u001b[22m\n" +
    "\u001b[1m\u001b[31m      Types of parameters 'res' and 'currentSubject' are incompatible.\u001b[39m\u001b[22m\n" +
    "\u001b[1m\u001b[31m        Type 'Response' is missing the following properties from type 'Response': ok, redirected, trailer, type, and 8 more.\u001b[39m\u001b[22m",
  details: undefined,
  stack: undefined
}

This is rather annoying, and it’d be great to get this fixed. It seems like it’s mostly a matter of changing

return err.replace(...)

to

const message = typeof err === 'string' ? err : err.message
return message.replace(...)