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:

./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

Thank you.

UPDATE

I created 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',
                    },
                ],
            },
        ],
    },
};

I'm lost, are you using `cypress-cucumber-preprocessor` from https://github.com/badeball/cypress-cucumber-preprocessor/blob/master/docs/quick-start.md ? — Wandrille, May 04 '23 at 13:49
To configure Cypress, I invite you to check this repository that implements it https://github.com/wandri/chat-spring-kafka-angular-react-vue — Wandrille, May 04 '23 at 13:51
Cypress cucumber processor was installed with ```npm install --save-dev cypress cypress-cucumber-preprocessor``` — Francislainy Campos, May 04 '23 at 14:00
I tried now with the other preprocessor you suggested, but the error is still the same. — Francislainy Campos, May 04 '23 at 14:08
`cypress-cucumber-preprocessor` is not anymore updated. The package was migrated to `github.com/badeball/cypress-cucumber-preprocessor`. Please use it instead — Wandrille, May 04 '23 at 14:09

score 2 · Accepted Answer · answered May 04 '23 at 20:58

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

By the way, I also needed to put my steps definitions inside the support folder. I've added all the code here with the sample to load the google page in case it may be useful to someone else. https://github.com/francislainy/debug-cypress — Francislainy Campos, May 05 '23 at 14:31

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

1 Answers1