Cypress: Webpack 5 support

[missing1984]

What would you like?

Webpack 5 is released 2 weeks ago. https://webpack.js.org/blog/2020-10-10-webpack-5-release/, does Cypress has any plan upgrade its webpack preprocessor to support webpack 5?

Why is this needed?

Most of the open-source projects are moving towards webpack 5. For a project that already using webpack 5 it will be great to have it work out of the box.

[Reiterkk]

That would be very desirable in any case. With webpack 5.1.3, webpack-cli 4.1.0, cypress 5.4.0 and webpack-preprocessor 5.4.8 I currently get the error:

For example, when I try to import FullCalendar, it aborts completely:

Is there a recommended combination of webpack, webpack-cli, cypress and webpack-preprocessor that currently works together?

[dmtrKovalenko]

Question @Reiterkk can you please provide at least a little way to reproduce the errors. Many thanks

[vahidd]

@Reiterkk Did you manage to fix it?

[csvan]

Should probably be kept in mind that while Webpack 5 is in stable, it's not very _stable_ at the moment, and the ecosystem has yet to catch on. Cypress should probably give it a few months before migrating for the sake of stability.

[dmtrKovalenko]

This was already fixed, but we cannot merge it because it breaks react-scripts.

[Reiterkk]

Question @Reiterkk can you please provide at least a little way to reproduce the errors. Many thanks

Sorry for not being able to provide more information at the moment, because I'm very busy with some other projects currently. Glad to hear, you found a way to fix it and I'm looking forward for the solution, once it doesn't break anything anymore.

[twgraham]

Is there no way to release a new breaking version of it (or prerelease). I imagine there are many others like myself who don't rely on CRA (or react for that matter) that require webpack 5 support.

[dmtrKovalenko]

cc @JessicaSachs

[rohrlaf]

@Reiterkk I just tried this out with Cypress 4 after a Webpack 5 upgrade of our component playground React-Styleguidist. I ran into the same error message, and most suggestions I found ended up here: https://docs.cypress.io/api/events/catalog-of-events.html#Uncaught-Exceptions

After adding the code below, the Cypress tests run through and the components behave just like before:

// likely want to do this in a support file
// so it's applied to all spec files
// cypress/support/index.js

Cypress.on('uncaught:exception', (err, runnable) => {
  // returning false here prevents Cypress from
  // failing the test
  return false
})

[dmtrKovalenko]

While we cannot release the final version of preprocessor with webpack v5 support – I released the temporary version of this package that supports webpack v5 – https://www.npmjs.com/package/cypress-webpack-preprocessor-v5

Install the temporal version

yarn add cypress-webpack-preprocessor-v5

[paulfalgout]

Hmm. I've been using cypress-webpack-preprocessor with webpack 5 now for a bit and the only issue for us is the peer dependency warning. It seems like adding an || ^5.1.0 to that would work for at least some people without really being a breaking change.

https://github.com/RoundingWell/care-ops-frontend/blob/develop/package.json#L106