Cypress Error: Webpack Compilation Error when running feature file with cucumber

Question

Im trying to run a cypress feature file but im getting the webpack error.

Error: Webpack Compilation Error
Module parse failed: Unexpected token (1:17)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

> Feature: XXXXX login  
> |         Quero fazer login no XXXXX utilizando as informações da organização de Automação.

I've been searching for a long time and tried so much solutions and nothing seemed to work.

Here's my files: cypress/plugins/index.js

//For Cucumber Integration
const createEsbuildPlugin =
  require('@badeball/cypress-cucumber-preprocessor/esbuild').createEsbuildPlugin

const createBundler = require('@bahmutov/cypress-esbuild-preprocessor')
const nodePolyfills =
  require('@esbuild-plugins/node-modules-polyfill').NodeModulesPolyfillPlugin

const addCucumberPreprocessorPlugin =
  require('@badeball/cypress-cucumber-preprocessor').addCucumberPreprocessorPlugin

module.exports = async (on, config) => {
  await addCucumberPreprocessorPlugin(on, config) // to allow json to be produced
  // To use esBuild for the bundler when preprocessing
  on(
    'file:preprocessor',
    createBundler({
      plugins: [nodePolyfills(), createEsbuildPlugin(config)],
    })
  )
  return config
}

cypress/package.json

 "devDependencies": {
    "@badeball/cypress-cucumber-preprocessor": "^18.0.6",
    "@bahmutov/cypress-esbuild-preprocessor": "^2.2.0",
    "@cypress/browserify-preprocessor": "^3.0.2",
    "@cypress/webpack-preprocessor": "^6.0.0",
    "@cypress/xpath": "^2.0.3",
    "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
    "@faker-js/faker": "^8.0.2",
    "cypress": "^13.3.0",
    "cypress-network-idle": "^1.14.2"
  },
  "cypress-cucumber-preprocessor": {
    "stepDefinitions": [
      "[filepath].{js,ts}",
      "cypress/support/step_definitions/**/*.{js,ts}",
      "cypress/files/stepDefinitions/*.{js,ts}",
      "cypress/e2e/Features/**/*.{js,ts}" ],
    "filterSpecs": true,
    "omitFiltered": true
  }

and my cypress/cypress.configs.js

const { defineConfig } = require("cypress");
const createBundler = require("@bahmutov/cypress-esbuild-preprocessor");
const preprocessor = require("@badeball/cypress-cucumber-preprocessor");
const createEsbuildPlugin = require("@badeball/cypress-cucumber-preprocessor/esbuild");

async function setupNodeEvents(on, config) {
  await preprocessor.addCucumberPreprocessorPlugin(on, config);

  on(
    "file:preprocessor",
    createBundler({
      plugins: [createEsbuildPlugin.default(config)],
    })
  );

  // Make sure to return the config object as it might have been modified by the plugin.
  return config;
}

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
    specPattern: "cypress/e2e/**/*.{js,jsx,ts,tsx,feature,features,}",
    chromeWebSecurity: false,
    experimentalSessionAndOrigin: true,
    experimentalMemoryManagement: true,
    numTestsKeptInMemory: 1,
    defaultCommandTimeout: 10000,
    pageLoadTimeout: 120000,
    watchForFileChanges:false,
    chromeWebSecurity: false,
    experimentalModifyObstructiveThirdPartyCode: true,
    defaultCommandTimeout: 10000,
    env: {

    }

  },
  viewportWidth: 1920,
  viewportHeight: 1080
});

And my folder setup is like this: folder setup

I don't know what's going on with that but seems that my VS Code also doesn't recognize my feature file as one .feature, hence it doesn't get the prettier format as well but i dont know if this is a problem: Feature File and my stepDefinitions is like this:

/// <reference types="Cypress" />

import {Given,When,Then} from "@badeball/cypress-cucumber-preprocessor";
import {loginPagePO} from "../../../files/pageObjects/Cadastro Geral/loginPagePO";

const login = new loginPagePO();

Given ('Eu abro a aplicação do XXXXXX', () => {
    login.visitarXXXXXX()

})

When ('O usuário entra na aplicação utilizando usuário como {} e senha como {}', (Username,Password) => {
    login.inputEmaileSenha(Username, Password)
})

Then ('O usuário acessa a tela principal', () => {
    login.confirmarLoginQA()
})

Then ('O usuário faz Logout', () => {
    login.fazerLogout()
})

Answer 1

When working with Cucumber in Cypress and defining step functions that involve passing parameters, it is indeed essential to use the function keyword rather than an arrow function.

Cucumber requires the function syntax for proper parameter handling.

When('O usuário entra na aplicação utilizando usuário como {} e senha como {}',function (Username, Password) {login.inputEmaileSenha(Username, Password)})