Webpack 5 support

[raw3]

Hey there!

I've been struggling a fair bit to get our stack working after some library upgrades. Basically the issue comes down to two separate issues (which I hope is simply us making a simple configuration mistake):

---

1. We run the same Webpack version for Cypress in-line with our Angular version. Since we upgraded to Angular 12 which uses Webpack 5 in the background, it has stopped working with this cypress-cucumber-webpack-typescript-example configuration giving the error:

Error: Webpack Compilation Error
Cannot read property 'fallback' of undefined

We did follow some suggestions dictated in the main Cypress thread for Webpack 5 support. It works when having normal .spec files, but fails the moment we introduce cypress-cucumber-webpack and work with .feature files.

2. We can circumvent Webpack using @cypress/browserify-preprocessor and then the tests run, but our tsconfig path aliases were not working properly once we did. We did not manage to get them working using custom babelrc settings so far, which is why we wanted to stick with Webpack (aside from the point we use Webpack more across our stack).

---

I have a minimal repo here (with a nice auto-generated repo-name 🌝) with the issues and a basic example of how we run our stack.

https://github.com/raw3/psychic-guacamole

It would be great if we could get it working, since we really love working with .feature files and love the work you guys are doing! If there's any info missing or if there's anything I can do to help, feel free to let me know!

[LeanderKnol]

Having the same issues. Angular 12 depends on webpack 5.44, so moving back to an older version of webpack (4.X.X) is no option. Did not get it working, so I anyone has a fix would be creat.

[raw3]

We got it running on Webpack 4 now by using the following libraries:

    "@cypress/webpack-batteries-included-preprocessor": "1.3.3",
    "@cypress/webpack-preprocessor": "5.9.1",
    "cypress": "8.2.0",
    "cypress-cucumber-preprocessor": "4.2.0"

Within the plugins.ts we then use:

const webpack = require('@cypress/webpack-batteries-included-preprocessor');

module.exports = (on: any) => {
  const options = {
    typescript: true,
    webpackOptions: require('./webpack.config.js'),
  };
  on('file:preprocessor', webpack(options));
};

The webpack-batteries-included-preprocessor and specifically that version includes Webpack 4 which makes it not default to our Angulars Webpack 5 :)

Still, we'd rather have Webpack 5 work with this plugin, so any help would still be very helpful on this!

[ftanrisevdi]

Hello all, I am wondering if there is any progress on this issue?