Angular项目使用Cypress 10搭配Cucumber时触发Webpack编译错误

我已查阅站内所有同类问题，未找到适配当前场景的有效解决方案。当前项目直接沿用Angular默认构建配置，未单独创建webpack.config.js文件，问题报错详情见截图：

初始复杂项目配置信息 #

1. package.json中cypress-cucumber-preprocessor配置项：

"cypress-cucumber-preprocessor": {
  "nonGlobalStepDefinitions": true,
  "json": {
    "enabled": true
  },
  "stepDefinitions": "**/cypress/e2e/**/*.js",
  "step_definitions": "**/cypress/e2e/**/*.js"
}

2. cypress.config.ts配置：

import { defineConfig } from 'cypress'
export default defineConfig({
  e2e: {
    // 已在此处导入旧版Cypress插件，后续可按需调整导入逻辑清理代码
    setupNodeEvents(on, config) {
      return require('./cypress/plugins/index.js')(on, config)
    },
    specPattern: '**/e2e/**/*.feature',
    "supportFile": false,
    chromeWebSecurity: false
  },
})

排查更新说明 #

感谢@Wirtuald的回复。该问题最初出现在复杂度较高的Angular业务项目中，为定位根因，我从零搭建了最简基础项目做复现验证，仍然触发完全相同的报错，全新测试项目的相关信息如下：

• 项目未创建plugins文件夹
• package.json中相关依赖版本：

"devDependencies": {
  "@badeball/cypress-cucumber-preprocessor": "^11.2.0",
  "cypress": "^10.2.0"
}

• package.json中cypress-cucumber-preprocessor配置：

"cypress-cucumber-preprocessor": {
  "nonGlobalStepDefinitions": true,
  "json": {
    "enabled": true
  },
  "stepDefinitions": [
    "[filepath].{js,ts}",
    "cypress/e2e/**/*.{js,ts}"
  ]
}

• cypress.config.js配置：

const { defineConfig } = require("cypress");
module.exports = defineConfig({
  e2e: {
    specPattern: "**/*.feature",
    chromeWebSecurity: false,
    setupNodeEvents(on, config) {
      // 在此处实现Node事件监听器
    },
  },
});

• 项目结构参考截图：
  
• 步骤定义文件direct-attention-steps.js代码：

import { Given, When, Then } from "@badeball/cypress-cucumber-preprocessor";
Given("Access to NXSuite", () => {
  cy.visit("https://www.nxsuite.com");
})

诉求 #

需要该Webpack编译错误的根因分析，以及可落地的修复方案。

内容的提问来源于stack exchange，提问作者German Larcher