Cypress 错误：使用 cucumber 运行功能文件时出现 Webpack 编译错误

问：

我试图运行一个赛普拉斯功能文件，但我收到 webpack 错误。

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.

我已经搜索了很长时间，尝试了很多解决方案，但似乎没有任何效果。

这是我的文件：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
  }

和我的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
});

我的文件夹设置是这样的：文件夹设置

我不知道这是怎么回事，但似乎我的 VS Code 也没有将我的功能文件识别为一个 .feature，因此它也没有获得更漂亮的格式，但我不知道这是否是一个问题： 功能文件和我的 stepDefinitions 是这样的：

/// <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()
})