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

Current behavior

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.

Desired behavior

Cypress should run normally & accept the alias imports.

Test code to reproduce

cypress/plugins/index.js:

/* eslint-disable no-undef */
/// <reference types="cypress" />

const cucumber = require("@badeball/cypress-cucumber-preprocessor");
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 "@badeball/cypress-cucumber-preprocessor";

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

Versions

• Cypress version: 9.7.0
• Preprocessor version: 11.4.0
• Node version: v16.16.0

Checklist

• I’ve read the FAQ.
• I’ve read Instructions for logging issues.
• I’m not using cypress-cucumber-preprocessor@4.3.1 (package name has changed and it is no longer the most recent version, see #689).

[badeball]

No, I wouldn’t be able to tell, as I never used it.

[badeball]

v4.3.1 is old, unsupported and should never really be used. There’s tons of compatibility issues with the most recent Cypress versions, hence unsupported.