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

I want to use module aliases to manage imports when it comes to Page Objects using Cypress(v9.7.0). I currently have this error showing in Cypress's Window:

Error: 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
> Feature: Login through UI with valid credentials
|   As a user
|   I want to login to the application

This error is coming from cucumber's file with an extension of .feature so I assuming Webpack is throwing an error due to cucumber.

This is what I got so far:

cypress/plugins/index.js

/* eslint-disable no-undef */
/// <reference types="cypress" />
const cucumber = require("cypress-cucumber-preprocessor").default;
const webpack = require("@cypress/webpack-preprocessor");

// eslint-disable-next-line no-unused-vars
module.exports = (on, config) => {
  on("file:preprocessor", cucumber());
};

module.exports = (on) => {
  const options = {
    webpackOptions: require("../../webpack.config"),
    watchOptions: {},
  };
  on("file:preprocessor", webpack(options));
};

webpack.config.js:

// eslint-disable-next-line no-undef
const path = require("path");

// eslint-disable-next-line no-undef
module.exports = {
  resolve: {
    alias: {
      // eslint-disable-next-line no-undef
      "@Pages": path.resolve(__dirname, "cypress/pages"),
    },
  },
};

cypress/integration/e2e/e2e-login:

import TabLinksPage from "@Pages/tab-links";
import { Given, When, Then } from "cypress-cucumber-preprocessor/steps";

const TabLinks = new TabLinksPage();
Given("the user is on the login page", () => {
  cy.visit(Cypress.config("baseUrl"));
});

When("the user enters valid credentials", () => {
  cy.loginByUI();
});

Then("the user is redirected to the home page", () => {
  cy.getCookies();
  TabLinks.getTabLinkSupplier();
});

cypress/integration/e2e/e2e-login.feature:

Feature: Login through UI with valid credentials
  As a user
  I want to login to the application

  Scenario: User logs in the webapp with valid credentials
    Given the user is on the login page
    When the user enters valid credentials
    Then the user is redirected to the home page