webpack "Module not found: Error: Can't resolve" - Fix in CI

webpack followed an import/require and could not find the target on disk or in node_modules. It is almost always a dependency that was never installed, a path that is wrong, or a resolve config the build never set up.

What this error means

The build fails with Module not found: Error: Can't resolve '<module>' naming the importing file. It is deterministic - the same import fails identically every run, and re-running never clears it.

webpack

ERROR in ./src/App.jsx 3:0-29
Module not found: Error: Can't resolve './componets/Header' in '/app/src'
resolve './componets/Header' in '/app/src'
  using description file: /app/package.json (relative path: ./src)

Common causes

Dependency not installed

The package is imported but missing from node_modules - not in package.json, or npm ci ran against a lockfile that omits it. It works locally where it was installed ad hoc.

Wrong path or case mismatch

A typo (./componets), a wrong relative depth, or a casing difference. Casing bites hardest in CI: Linux is case-sensitive, so ./Header vs ./header passes on macOS and fails on the runner.

Missing resolve alias or extension

An alias like @/ or a non-default extension (.ts, .jsx) is not declared in resolve.alias/resolve.extensions, so webpack cannot map the specifier to a file.

How to fix it

Install the dependency and verify the path

Add the missing package and confirm the import points at a real file with exact casing.
Run ls -la on the target directory to check the filename character for character.
Reinstall from the lockfile with npm ci so the resolved tree is reproducible.

Terminal

npm install <package>
ls -la src/components/Header.jsx

Declare aliases and extensions

Make custom specifiers resolvable in the webpack config.

webpack.config.js

// webpack.config.js
resolve: {
  alias: { '@': path.resolve(__dirname, 'src') },
  extensions: ['.js', '.jsx', '.ts', '.tsx'],
}

How to prevent it

Commit a lockfile and install with npm ci so dependencies are reproducible.
Use CaseSensitivePathsPlugin so case bugs surface on macOS/Windows before CI.
Keep webpack resolve.alias in sync with your tsconfig paths.