Cypress10.2.0运行Cucumber Feature文件报Webpack编译错误如何解决

这个报错的核心原因是Cypress 10+版本重构了配置与预处理器逻辑，未配置适配版本的.feature文件解析器，高版本Cypress不再兼容旧版已停止维护的cypress-cucumber-preprocessor包，按照以下步骤逐一排查修复即可：

• 先清理错误依赖，安装适配Cypress 10+版本的Cucumber相关包
  先执行命令卸载不兼容的旧版预处理器：
  npm uninstall cypress-cucumber-preprocessor
  再执行命令安装当前维护的适配版依赖：
  npm install @badeball/cypress-cucumber-preprocessor @bahmutov/cypress-esbuild-preprocessor --save-dev
• 修正Cypress配置文件
  Cypress 10+版本使用cypress.config.js作为配置文件，不再使用旧版的cypress.json，将配置替换为以下正确逻辑，确保预处理器正确挂载、feature文件被正确识别：

  const { defineConfig } = require("cypress");
  const createBundler = require("@bahmutov/cypress-esbuild-preprocessor");
  const addCucumberPreprocessorPlugin = require("@badeball/cypress-cucumber-preprocessor").addCucumberPreprocessorPlugin;
  const createEsbuildPlugin = require("@badeball/cypress-cucumber-preprocessor/esbuild").createEsbuildPlugin;
  
  module.exports = defineConfig({
    e2e: {
      async setupNodeEvents(on, config) {
        const bundler = createBundler({
          plugins: [createEsbuildPlugin(config)],
        });
        on("file:preprocessor", bundler);
        await addCucumberPreprocessorPlugin(on, config);
        return config;
      },
      specPattern: "cypress/e2e/**/*.feature",
    },
  });
  

  注意配置里的specPattern必须明确指向存放feature文件的目录，Cypress默认的spec匹配规则不会识别.feature后缀文件。
• 补充Cucumber预处理器配置
  在项目package.json中新增如下配置段，指定步骤定义文件的匹配规则，也可以单独创建.cypress-cucumber-preprocessorrc文件存放该配置：

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

• 排查常见配置误区
  • 不要照搬Cypress 9及以下版本的webpack loader配置，Cypress 10+默认使用esbuild作为打包器，硬套webpack配置大概率会出现解析不生效的问题，使用上述esbuild适配方案稳定性最高
  • 所有配置修改完成后，必须完全退出重启Cypress运行器，Cypress的热重载不会重新加载预处理器相关配置
  • 如果之前安装过多个版本的Cucumber预处理器，先删除node_modules目录和对应锁文件（package-lock.json/pnpm-lock.yaml/yarn.lock），重新执行依赖安装命令，避免多版本依赖冲突
  • 检查feature文件存放路径，必须和specPattern配置的路径规则一致，不要放错目录导致识别异常

内容的提问来源于stack exchange，提问作者Mahad Khurshid