Javascript – Webpack compilation error with cypress-cucumber-preprocessor

Error Message: Webpack Compilation Error
Module parse failed: Unexpected token (1:15)
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

Context:
I have installed cucumber package (npm install –save-dev cypress-cucumber-preprocessor)
I have updated my cypress/plugins/index.js file to configure Cypress to use the cypress-cucumber-preprocessor.

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

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

I have also modified my cypress.config.js file to specify the specPattern correctly for Cypress to find and run my .feature files.

{
  "baseUrl": "https://reqres.in/api",
  "e2e": {
    "specPattern": "**/*.feature"
  }
}

My code file directory cypressintegrationstep_definitionsusers_steps.js

import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';

Given('the API is available', () => {
  // Setup steps if needed
});

When('I request the first page of users', () => {
  cy.request('GET', '/users?page=1').as('getUsers');
});

When('I request user with ID 2', () => {
  cy.request('GET', '/users/2').as('getUser');
});

When('I submit a request to create a new user', () => {
  cy.request('POST', '/users', {
    name: 'John Doe',
    job: 'Software Developer'
  }).as('createUser');
});

Then('I should receive a 200 status code', () => {
  cy.get('@getUsers').its('status').should('eq', 200);
  cy.get('@getUser').its('status').should('eq', 200);
});

Then('I should receive a 201 status code', () => {
  cy.get('@createUser').its('status').should('eq', 201);
});

Then('the response should contain a list of users', () => {
  cy.get('@getUsers').its('body').should('have.property', 'data');
  cy.get('@getUsers').its('body.data').should('be.an', 'array');
});

Then('the response should contain the user's details', () => {
  cy.get('@getUser').its('body.data').should((user) => {
    expect(user).to.have.property('id', 2);
    expect(user).to.have.property('first_name');
    expect(user).to.have.property('last_name');
    expect(user).to.have.property('email');
  });
});

Then('the response should contain the user's ID', () => {
  cy.get('@createUser').its('body').should((user) => {
    expect(user).to.have.property('id');
    expect(user).to.have.property('createdAt');
  });
});

My feature file directory cypressintegrationfeaturesusers.feature

Feature: Users API

  Scenario: Retrieve first page of users
    Given the API is available
    When I request the first page of users
    Then I should receive a 200 status code
    And the response should contain a list of users

  Scenario: Retrieve a single user by ID
    Given the API is available
    When I request user with ID 2
    Then I should receive a 200 status code
    And the response should contain the user's details

  Scenario: Create a new user
    Given the API is available
    When I submit a request to create a new user
    Then I should receive a 201 status code
    And the response should contain the user's ID

Package.json

{
  "devDependencies": {
    "cypress": "^13.12.0",
    "cypress-cucumber-preprocessor": "^4.3.1"
  }
}