Module not found: Can't resolve

The bundler followed an import to a file or package that doesn’t exist under that name, so it couldn’t build the page.

Next.js overlay and build log
./src/app/page.tsx:2:1 Module not found: Can't resolve '@/components/Header'

Also appears as

  • Module not found: Error: Can't resolve './components/Header' in '/Users/me/my-app/src'
  • Error: Turbopack build failed with 1 error: ./src/app/page.tsx:2:1 Module not found: Can't resolve '@/components/Header'

Prompt to fix it

The build fails with "Module not found: Can't resolve" and an import path. Open the file and line in the error and check what that import points to. If it’s a project file, find the real file and fix the path, matching its letter case exactly, because the build server is case-sensitive. If it’s a package, add it to package.json and the lockfile. If it’s a @/ alias, check the paths setting in tsconfig.json. If it’s a Node built-in like fs, move that code to the server. Don’t create an empty placeholder file just to make the error go away.

Paste into Layerwise or any AI coding tool.

What it means

Next.js and webpack follow every import in your code when they build the app. “Can’t resolve” means one of those imports points at nothing: no file at that path, no installed package with that name, or an alias like @/ that isn’t set up. The first line shows the file with the bad import, plus its line and column.

In AI-built projects, the import is often ahead of the file. The tool writes import Header from '@/components/Header' and then names the file differently, puts it in another folder, or never creates it. Packages go missing the same way: the code imports framer-motion, and nobody installed it.

If it works locally and fails on Vercel, check letter case first. macOS and Windows treat header.tsx and Header.tsx as the same file, and Linux build servers don’t. Git on a Mac also ignores case-only renames by default, so renaming the file in your editor may never reach the server.

Common causes

  • The imported file was moved, renamed, or never created, which is common after an AI tool reorganizes components.
  • The package isn’t in package.json, so npm install never downloaded it.
  • The import’s letter case differs from the file name, which only fails on case-sensitive Linux build servers.
  • The @/ alias is missing from compilerOptions.paths in tsconfig.json, or it points to ./src/* while the file lives outside src.
  • A client component imports server-only code, which shows up as Can't resolve 'fs' or another Node built-in module.

How to fix it

  1. Open the file and line from the first line of the error, and read the import path in quotes.
  2. For a project file, confirm it exists at that path with the same letter case. Fix the import, or rename the file with git mv so git records a case-only change.
  3. For a package, run npm install <name> and commit both package.json and package-lock.json.
  4. For @/ imports, check that tsconfig.json maps "@/*" to ["./src/*"], or to ["./*"] when there’s no src folder, then restart the dev server.
  5. For fs, path, and other Node modules, move that code into a server component, route handler, or server action, and keep it out of files marked 'use client'.

Example fix

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Related errors

All errors
[plugin:vite:import-analysis] Failed to resolve import "./components/Header" from "src/App.tsx". Does the file exist?

Failed to resolve import

Vite couldn’t find the file or package an import points to, so it can’t serve or build the page until the import matches something real.

Error: Cannot find module 'express' Require stack: - /Users/me/my-app/server.js

Cannot find module

Node tried to load a package or file that isn’t where the code says it is, usually because it was never installed or the path is wrong.

You're importing a module that depends on `useState` into a React Server Component module. This API is only available in Client Components. To fix, mark the file (or its parent) with the `"use client"` directive. Learn more: https://nextjs.org/docs/app/api-reference/directives/use-client

You’re importing a component that needs useState

A Next.js Server Component used a browser-side React feature like useState, which only works in files marked as Client Components.

Error: Command "npm run build" exited with 1

Command "npm run build" exited with 1

Your build script failed on the host. This line only reports the failure; the actual error is printed earlier in the build log.

Build with an agent that checks its work

The Layerwise agent clicks through the live preview and reads the console, so it catches errors before you do.

DownloadRead the docs