Cypress: You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

Question

I'm an automation engineer trying to configure a cypress test inside an existing react application but I keep getting this error:

Webpack Compilation Error
./cypress/e2e/googleSearch.feature 1:16
Module parse failed: Unexpected token (1:16)
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: Google Search

My feature file is located under: /Users/francislainycampos/IdeaProjects/hello-talk-web/cypress/e2e/googleSearch.feature

My steps file is under: /Users/francislainycampos/IdeaProjects/hello-talk-web/cypress/e2e/spec/googleSearch.spec.js

My plugins/index.js file has this:

const cucumber = require('cypress-cucumber-preprocessor').default
module.exports = (on, config) => {
    on('file:preprocessor', cucumber())
}

And my package json file has these versions:

 "devDependencies": {
    "cypress": "^12.11.0",
    "cypress-cucumber-preprocessor": "^4.3.1",
    "@cypress/webpack-preprocessor": "^5.17.1",
  },
  "cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": true
  }

My cypress.config.js has:

const {defineConfig} = require("cypress");

module.exports = defineConfig({
    e2e: {
        setupNodeEvents(on, config) {
            // implement node event listeners here
        },
        specPattern: "/Users/francislainycampos/IdeaProjects/hello-talk-web/cypress/e2e/googleSearch.feature",

        // integrationFolder: "cypress/e2e",
        supportFile: "cypress/support/commands.js",
    },
});

This is my project on Github: https://github.com/francislainy/hello-talk-web/tree/cucumber

I attempted to address this by creating a webpack.config.js file under the root of the project as below, but still getting the same error.

module.exports = {
    module: {
        rules: [
            {
                test: /\.feature$/,
                use: [
                    {
                        loader: 'cypress-cucumber-webpack-preprocessor/loader',
                    },
                ],
            },
        ],
    },
};

Answer 1

You have a "hybrid" system that needs updating, although I recommend starting fresh to make it easier.

• plugins/index.js this is from a Cypress 9 setup and is no longer used. You could use it but why make life difficult?

• cypress-cucumber-preprocessor is defunct, remove it and install github.com/badeball/cypress-cucumber-preprocessor

• the configuration for github.com/badeball/cypress-cucumber-preprocessor is inside cypress.config.js and is given in the documentation. I recommend this one

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)],
    })
  );

  return config;
}

module.exports = defineConfig({
  e2e: {
    specPattern: "**/*.feature",
    setupNodeEvents,
  },
})

• add dependency @bahmutov/cypress-esbuild-preprocessor