Webpack compilation error during test execution

[PratheebaRavi]

I am finding an error when I try running my testcase. I am using v13.3.1

spec.cy.js code from
C:\Users\PR\mainfolder\Documents\GitHub\project\CypressAutomation_March21\cypress\e2e\spec.cy.js
import loginStepDef from '../integration/examples/BDD/Login/loginStepDef.js';

examples.json - fixture file C:\Users\PR\mainfolder\Documents\GitHub\project\CypressAutomation_March21\cypress\fixtures

{
  "validCredentials": {
    "username": "testuser",
    "password": "password123"
  },
  "invalidCredentials": {
    "username": "invaliduser",
    "password": "invalidpassword"
  }
}

Step Definition from C:\Users\PR\mainfolder\Documents\GitHub\project\CypressAutomation_March21\cypress\integration\examples\BDD\Login\loginStepDef.js

//This file contains step definitions for Cucumber scenarios related to login.
//It imports the LoginPage from the page objects.

// Update the import path for Login.js
import Login from '../../support/pageObjects/Login';

//import example from '../../../../fixtures/example.json'; // Adjust the path accordingly
// Update the import path for example.json
import exampleData from '../../fixtures/example.json';


//const validCredentials = example.validCredentials;
//const invalidCredentials = example.invalidCredentials;


const validCredentials = exampleData.validCredentials;
//const invalidCredentials = example.invalidCredentials;

Given('I visit the login page', () => {
  // Navigate to the login page (you can implement this based on your application)
  // For example:
  cy.visit('/login');
});

When('I enter my username and password', () => {
  Login.enterUsername(validCredentials.username);
  Login.enterPassword(validCredentials.password);
});

When('I click the login button', () => {
  Login.clickLoginButton();
});

feature file from C:\Users\PR\mainfolder\Documents\GitHub\project\CypressAutomation_March21\cypress\integration\examples\BDD

Feature: Login

  Scenario: User can log in with valid credentials
    Given I visit the login page
    When I enter my username and password
    And I click the login button
    Then I should be logged in

  # Other scenarios for login

Plugin\index.js C:\Users\PR\mainfolder\Documents\GitHub\project\CypressAutomation_March21\cypress\plugins const cucumber = require('@badeball/cypress-cucumber-preprocessor').default;

// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)
module.exports = (on, config) => {
  on('file:preprocessor', cucumber());

  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config
}

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

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

Login.js from pageobjects C:\Users\PR\mainfolder\Documents\GitHub\project\CypressAutomation_March21\cypress\support\pageObjects

//This file defines the LoginPage class, representing the page object for the login page.
//It provides methods to interact with the login page's elements (e.g., username input, password input, login button).

class LoginPage {
// Define page elements for login page
getUsernameInput() {
return cy.get('#username');
}

getPasswordInput() {
  return cy.get('#password');
}

getLoginButton() {
  return cy.get('#login-button');
}

// Define actions related to login page
enterUsername(username) {
  this.getUsernameInput().type(username);
}

enterPassword(password) {
  this.getPasswordInput().type(password);
}

clickLoginButton() {
  this.getLoginButton().click();
}

}

export default new LoginPage();

Error message:
Running: spec.cy.js (1 of 1)

Oops...we found an error preparing this test file:

cypress\e2e\spec.cy.js

The error was:

Error: Webpack Compilation Error
Module not found: Error: Can't resolve '../../support/pageObjects/Login' in 'C:\Users\PR\mainfolder\Documents\GitHub\project\CypressAutomation_March21\cypress\integration\examples\BDD\Login'

Module not found: Error: Can't resolve '../../fixtures/example.json' in 'C:\Users\PR\mainfolder\Documents\GitHub\project\CypressAutomation_March21\cypress\integration\examples\BDD\Login'
at handle (C:\Users\PR\AppData\Local\Cypress\Cache\13.3.1\Cypress\resources\app\node_modules@packages\server\node_modules@cypress\webpack-preprocessor\dist\index.js:212:23)
at finalCallback (C:\Users\PR\AppData\Local\Cypress\Cache\13.3.1\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:441:32)
at C:\Users\PR\AppData\Local\Cypress\Cache\13.3.1\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:505:17
at C:\Users\PR\AppData\Local\Cypress\Cache\13.3.1\Cypress\resources\app\node_modules\webpack\lib\HookWebpackError.js:68:3
at Hook.eval [as callAsync] (eval at create (C:\Users\PR\AppData\Local\Cypress\Cache\13.3.1\Cypress\resources\app\node_modules\tapable\lib\HookCodeFactory.js:33:10),
:6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\PR\AppData\Local\Cypress\Cache\13.3.1\Cypress\resources\app\node_modules\tapable\lib\Hook.js:18:14)
at Cache.storeBuildDependencies (C:\Users\PR\AppData\Local\Cypress\Cache\13.3.1\Cypress\resources\app\node_modules\webpack\lib\Cache.js:122:37)
at C:\Users\PR\AppData\Local\Cypress\Cache\13.3.1\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:501:19
at Hook.eval [as callAsync] (eval at create (C:\Users\PR\AppData\Local\Cypress\Cache\13.3.1\Cypress\resources\app\node_modules\tapable\lib\HookCodeFactory.js:33:10),
:6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\PR\AppData\Local\Cypress\Cache\13.3.1\Cypress\resources\app\node_modules\tapable\lib\Hook.js:18:14)
at C:\Users\PR\AppData\Local\Cypress\Cache\13.3.1\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:498:23
at Compiler.emitRecords (C:\Users\PR\AppData\Local\Cypress\Cache\13.3.1\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:919:5)
at C:\Users\PR\AppData\Local\Cypress\Cache\13.3.1\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:490:11
at C:\Users\PR\AppData\Local\Cypress\Cache\13.3.1\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:885:14
at Hook.eval [as callAsync] (eval at create (C:\Users\PR\AppData\Local\Cypress\Cache\13.3.1\Cypress\resources\app\node_modules\tapable\lib\HookCodeFactory.js:33:10),
:6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\PR\AppData\Local\Cypress\Cache\13.3.1\Cypress\resources\app\node_modules\tapable\lib\Hook.js:18:14)
at C:\Users\PR\AppData\Local\Cypress\Cache\13.3.1\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:882:27
at C:\Users\PR\AppData\Local\Cypress\Cache\13.3.1\Cypress\resources\app\node_modules\neo-async\async.js:2818:7
at done (C:\Users\PR\AppData\Local\Cypress\Cache\13.3.1\Cypress\resources\app\node_modules\neo-async\async.js:3522:9)
at alreadyWritten (C:\Users\PR\AppData\Local\Cypress\Cache\13.3.1\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:714:8)
at C:\Users\PR\AppData\Local\Cypress\Cache\13.3.1\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:802:19
at C:\Users\PR\AppData\Local\Cypress\Cache\13.3.1\Cypress\resources\app\node_modules\graceful-fs\graceful-fs.js:123:16
at C:\Users\PR\AppData\Local\Cypress\Cache\13.3.1\Cypress\resources\app\node_modules@packages\server\node_modules\graceful-fs\graceful-fs.js:123:16
at C:\Users\PR\AppData\Local\Cypress\Cache\13.3.1\Cypress\resources\app\node_modules@packages\server\node_modules\graceful-fs\graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)

This occurred while Cypress was compiling and bundling your test code. This is usually caused by:

• A missing file or dependency
• A syntax error in the file or one of its dependencies

Fix the error in your code and re-run your tests.

(Results)

┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 0 │
│ Passing: 0 │
│ Failing: 1 │
│ Pending: 0 │
│ Skipped: 0 │
│ Screenshots: 0 │
│ Video: false │
│ Duration: 0 seconds │
│ Spec Ran: spec.cy.js │
└────────────────────────────────────────────────────────────────────────────────────────────────┘

(Run Finished)

   Spec                                              Tests  Passing  Failing  Pending  Skipped

┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ × spec.cy.js 0ms - - 1 - - │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
× 1 of 1 failed (100%) 0ms - - 1 - -