webpack - webpack.config.js fails to load cypress BDD script

Question

I have an issue with cypress-webpack

I am trying to automate a scenario in BDD where I can verify a login confirmation mail in Gmail. I have installed the Gmail-tester and I have set it up. At the point of execution, I got an error that I would need webpack to load the scripts. I set up webpack.config.js and also updated the plugin/index.js file. and I still run into errors.

Because of the NDA at work, I have prepared a private reproducible repository to show you if you would have time to take a look at it. All the info required is in the repo.

The Update in my plugin/index.js is:

const webpackPreprocessor = require('@cypress/webpack-preprocessor')

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

And My webpack.config.js file looks like this

module.exports = {
    //...
    resolve: {
        fallback: {
            fs: false, // do not include a polyfill for fs
            readline: false,
            child_process: false,
            extensions: [".ts", ".js", ".feature"]
        },
    },
    module: {
        rules: [
            {
                test: /\.js$/, // include .js files
                enforce: "pre", // preload the jshint loader
                exclude: /node_modules/, // exclude any and all files in the node_modules folder
                use: [{
                    loader: "jshint-loader",
                    // more options in the optional jshint object
                    options: {  // ⬅ formally jshint property
                        camelcase: true,
                        emitErrors: false,
                        failOnHint: false
                    }
                }]
            },
            {
                test: /\.feature$/,
                use: [
                    {
                        loader: "cypress-cucumber-preprocessor/loader"
                    }
                ]
            },
            {
                test: /\.features$/,
                use: [
                    {
                        loader: "cypress-cucumber-preprocessor/lib/featuresLoader"
                    }
                ]
            }
        ]
    }
};

And my package.json is:

{
  "name": "cypress_class",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "main": "index.js",
  "scripts": {
    "test": "cypress run --spec \"**/*.feature\"",
    "test:all": "cypress run --spec \"**/*.features\""
  },
  "author": "Ademola Bhadmus",
  "license": "ISC",
  "devDependencies": {
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
    "@cypress/webpack-preprocessor": "^5.9.1",
    "cypress": "^7.6.0",
    "cypress-cucumber-preprocessor": "^4.1.3",
    "gmail-tester": "^1.3.2",
    "jshint-loader": "^0.8.4"
  },
  "cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": true
  }
}

What am I doing wrong?