Webpack compilation error with Cypress-webpack-preprocessor

Question

I am not able to run cypress test and getting foll error:

When I ran cypress run:

It is giving below Webpack compilation error

Webpack Compilation Error
./cypress/integration/features/Pagination.feature
 Module not found: Error: Can't resolve 
'C:UsersCypressProjectode_modulescypress-cucumber-preprocessorlibesolveStepDefinition' in 'C:\Users\CypressProject\cypress\integration\features'

Somehow backslashes are also not included in above path

My webpack config file is as :

module.exports = {
resolve: {
  extensions: [".ts", ".js"]
},

node: { fs: "empty", child_process: "empty", readline: "empty" },
module: {
  rules: [
    {
      test: /\.ts$/,
      exclude: [/node_modules/],
      use: [
        {
          loader: "ts-loader"
        }
      ]
    },
    {
      test: /\.feature$/,
      use: [
        {
          loader: "cypress-cucumber-preprocessor/loader"
        }
      ]
    }
  ]
}
};

My plugin file:

const wp = require('@cypress/webpack-preprocessor')

const fs = require('fs-extra')
const path = require('path')

function getConfigurationByFile (file) {
  const pathToConfigFile = path.resolve('./cypress/', 'config', `${file}.json`)
  return fs.readJson(pathToConfigFile)
}

module.exports = (on,config) => {
    const file = process.env.ENV_FILE//config.env.envFile
  const options = {     
    webpackOptions: require("../webpack.config.js")
  };
  on('file:preprocessor', wp(options))
  if(file==null){
  return getConfigurationByFile('local');
  }
  else{
    return getConfigurationByFile(file);
  }
}

Anybody having idea to resolve?

Answer 1

You should set your step_definition path inside package.json with

"cypress-cucumber-preprocessor": {
    "step_definitions": "path/to/steps_definition"
}