Cypress Cucumber Setup

[nazeer100]

Hi, While running cypress cucumber feature file with Cypress 7.5 version below error is displayed.

Error: Webpack Compilation Error
./cypress/integration/Google.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 Main Page
| 
|   I want to open a search engine

I followed the below steps. https://github.com/TheBrainFamily/cypress-cucumber-preprocessor https://www.npmjs.com/package/cypress-cucumber-preprocessor

Let me know any changes are required?

[thomassjogren]

@nazeer100 I think you will get better and more relevant answers posting this issue on the package repo.

Also, you have to provide us with more information (configs, code and so on) in order for us to be able to help you.

That said. Even with this little information, the problem is that your specs are parsed by webpack and it doesn't understand the file.

[Thimmaraju]

npm i cypress-cucumber-preprocessor run this again and check ur package.json should have this dependency

[PavanGurram-DevOps]

@jennifer-shehane - Is there any update on it as I'm facing same issue on Windows 10 laptop? Please let me know if I need to share any details for investigation. Thanks

[PavanGurram-DevOps]

@nazeer100 Is it resolved for you please? If yes kindly help

[Saurabhj89]

Add below code in 'cypress/plugins/index.js' file. This worked for me.

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

[peteCarey]

I had a similar error message. It turned out to be an ES Lint parsing problem with .js files. I was able to fix it by adding to the .eslintignore file to omit the necessary files. The Cypress/Cucumber tests were then able to run.

[KRT-DEMO]

I am experiencing the same issue in our project. @peteCarey can you please share the files or types of files that you added to the .eslintignore that resolved this issue?

[dil-snagy]

hi guys,

today I had the same issue. My solution was the following: My problem was that I accidently put the cypress configuration (see screenshot below) to the folder 'cypress/support/index.js' instead of the file 'cypress/plugins/index.js'. After I fixed it the issue become solved.

I hope I was able to help you.

Sandor

ps: I also added the eslintignore file, but I do not think hat solved it. Mine has the following:

{ "extends": ["airbnb-base", "prettier"], "plugins": ["cypress", "prettier"], "env": { "browser": true, "cypress/globals": true, "jest": true }, "rules": { "prettier/prettier": "error" } }

[Himanshu-tester]

I am having the same issue. I updated the index.js file with below code but still getting the same error. Any suggestions?

const cucumber = require('cypress-cucumber-preprocessor').default

module.exports = (on, config) => { on('file:preprocessor', cucumber()) }

Error message: Error: Webpack Compilation Error ./cypress/integration/Basic_Tests/BDD/reportgen.feature 1:13 Module parse failed: Unexpected token (1:13) 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

[pwpatton]

If you are using the cypress-allure plugin you can also get this error if you don't specify allure and cucumber in the plugin/index.ts file correctly. I had to make that on("file:preprocessor", cucumber(options)); was called before allureWriter(on, config);

const cucumber = require("cypress-cucumber-preprocessor").default;
const browserify = require("@cypress/browserify-preprocessor");
const allureWriter = require('@shelex/cypress-allure-plugin/writer');

module.exports = (on, config) => {
  const options = {
    ...browserify.defaultOptions,
    typescript: require.resolve("typescript"),
  };

  on("file:preprocessor", cucumber(options));

  allureWriter(on, config);
  return config;
};

[tar-aldev]

For me, in cypresss.json, I had "pluginsFile": false for some reason. Maybe this is not an issue in your case, but it is worth checking

[palnic-chisel]

If you are using Cypress > 10 you need to add your configuration in cypress.config.ts like this (I'm using typescript, if you are not, avoid to copy the options part:

import { defineConfig } from 'cypress';

const browserify = require('@cypress/browserify-preprocessor');
const cucumber = require('cypress-cucumber-preprocessor').default;
const resolve = require('resolve');

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      const options = {
        ...browserify.defaultOptions,
        typescript: resolve.sync('typescript', { baseDir: config.projectRoot }),
      };
      on('file:preprocessor', cucumber(options));
    },
    specPattern: ['./**/*spec*.ts', '**/*.{feature,features}'],
  },
});

[emilyrohrbough]

I am going to close this issue. It sounds like the original issue was possibly(?) with setting up the cucumber-preprocessor and several people have provided solutions to setting this up in projects with various tools.

[mahRukh-133]

I'm facing this issue installing cucumber in #Cypress

[nagash77]

@mahRukh-133 Can you please open a new issue with a reproducible example of your steps that lead up to the problem please?