Cypress "Webpack Compilation Error" - Spec Bundling Failures

Cypress bundles each spec (and the support file) with its preprocessor before running it. A "Webpack Compilation Error" means that bundle step failed - a missing module, an unhandled file type, or a TypeScript/syntax error in the spec.

What this error means

A spec fails to start with "Webpack Compilation Error" and a module-not-found or loader error. The app itself builds fine; the failure is in compiling the test code, not the application.

Cypress output

Webpack Compilation Error
Module not found: Error: Can't resolve '../support/commands' in
'/app/cypress/e2e'

  @ ./cypress/e2e/login.cy.ts 3:0-39

Common causes

Bad import path in a spec or support file

A spec imports a helper or command file that does not exist at that path (often a case mismatch on Linux), so the bundler cannot resolve it.

Missing loader or TS config for spec syntax

TypeScript or non-JS imports in specs need the preprocessor configured. Without it, the bundle hits syntax it cannot compile.

How to fix it

Fix the import and align the preprocessor

Correct the failing import path, matching filename case exactly.
Ensure cypress/tsconfig.json (or the preprocessor) handles the spec’s TypeScript/JSX.
Confirm supportFile points at the real support module.

Use the bundled preprocessor config

cypress.config.ts

// cypress.config.ts
import { defineConfig } from 'cypress';
export default defineConfig({
  e2e: { supportFile: 'cypress/support/e2e.ts', specPattern: 'cypress/e2e/**/*.cy.ts' },
});

How to prevent it

Keep import paths and filename case consistent (Linux is case-sensitive).
Configure a cypress/tsconfig.json for TypeScript specs.
Lint specs so unresolved imports are caught before CI.