Cypress配置异常：已装所需模块仍触发WebPack编译错误

你当前的配置存在两个核心问题：一是代码里引入了Esbuild预处理器，但实际安装的是Webpack预处理器，依赖与代码不匹配；二是setupNodeEvents中没有注册预处理器，导致Cypress无法正确编译.feature文件。以下是两种可行的解决路径，可二选一：

方案一：沿用Webpack预处理器（匹配已安装的依赖） #

1. 安装Cucumber与Webpack适配的插件：

npm install @badeball/cypress-cucumber-preprocessor/webpack --save-dev

2. 修改cypress.config.js配置，替换Esbuild相关代码为Webpack配置：

const webpackPreprocessor = require('@cypress/webpack-preprocessor');
const addCucumberPreprocessorPlugin = require('@badeball/cypress-cucumber-preprocessor').addCucumberPreprocessorPlugin;
const createWebpackPlugin = require('@badeball/cypress-cucumber-preprocessor/webpack').createWebpackPlugin;
const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    specPattern: 'cypress/e2e/features/*.feature',
    stepDefinitions: "cypress/e2e/common/*.js",
    fixturesFolder: "cypress/fixtures",
    supportFile: 'cypress/support/e2e.js',
    async setupNodeEvents(on, config) {
      // 注册Cucumber插件
      await addCucumberPreprocessorPlugin(on, config);
      // 配置Webpack预处理器处理feature文件
      on('file:preprocessor', webpackPreprocessor({
        webpackOptions: {
          resolve: { extensions: ['.js', '.feature'] },
          module: {
            rules: [
              {
                test: /\.feature$/,
                use: [{ loader: '@badeball/cypress-cucumber-preprocessor/webpack', options: config }],
              },
            ],
          },
        },
      }));
      return config;
    },
  },
});

方案二：切换到Esbuild预处理器（更轻量快速） #

如果想改用代码里原本引入的Esbuild，需要调整依赖并完善配置：

1. 卸载Webpack预处理器：

npm uninstall @cypress/webpack-preprocessor

2. 安装Esbuild预处理器依赖（如果未安装）：

npm install @bahmutov/cypress-esbuild-preprocessor --save-dev

3. 完善cypress.config.js中的setupNodeEvents配置：

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

module.exports = defineConfig({
  e2e: {
    specPattern: 'cypress/e2e/features/*.feature',
    stepDefinitions: "cypress/e2e/common/*.js",
    fixturesFolder: "cypress/fixtures",
    supportFile: 'cypress/support/e2e.js',
    async setupNodeEvents(on, config) {
      // 注册Cucumber插件
      await addCucumberPreprocessorPlugin(on, config);
      // 配置Esbuild预处理器
      on('file:preprocessor', createBundler({
        plugins: [createEsBuildPlugin(config)],
      }));
      return config;
    },
  },
});

• 确认specPattern和stepDefinitions的文件路径与实际项目结构一致
• 若仍有问题，删除node_modules和package-lock.json，重新执行npm install
• 你的Cypress 14.12.0与@badeball/cypress-cucumber-preprocessor@18.x版本兼容，无需调整版本

内容的提问来源于stack exchange，提问作者Suprith Kangokar