Cannot find module or its corresponding type declarations

TypeScript couldn’t match an import to a file or package it understands, so the build fails even when the app runs fine in the browser.

Editor, terminal, and build log
src/App.tsx:3:20 - error TS2307: Cannot find module '@/components/Header' or its corresponding type declarations.

Also appears as

  • Cannot find module './logo.svg' or its corresponding type declarations. ts(2307)
  • error TS2792: Cannot find module 'zod'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?
  • error TS2882: Cannot find module or type declarations for side-effect import of './index.css'.

Prompt to fix it

TypeScript fails with "error TS2307: Cannot find module '…' or its corresponding type declarations." Work out whether the import is a path alias, a file in the project, a package, or an asset like an SVG or CSS file. For an alias, add the matching paths entry to the tsconfig that checks src (tsconfig.app.json in Vite) and make the bundler resolve the same alias. For a package, install it. For assets, load the vite/client types. Fix moved files and letter case. Then run the type check to confirm. Don’t silence it with @ts-ignore, a catch-all declare module '*', or by skipping tsc in the build.

Paste into Layerwise or any AI coding tool.

What it means

TypeScript resolves every import on its own, separately from the bundler that runs your app. TS2307 means it followed the import and found nothing it could read: no file at that path, no installed package, or a non-code file like .svg or .css with no type declaration describing it.

That’s why the page can work while this error fails the build. Vite and Next.js read aliases like @/ from their own config, and TypeScript only reads tsconfig.json. Vite’s dev server also skips type checks, so the error often first appears in the editor or when npm run build runs tsc during a deploy.

Vite projects add a trap: the root tsconfig.json only points to tsconfig.app.json and tsconfig.node.json. Settings such as paths have to be in tsconfig.app.json, the file that actually checks src/.

Common causes

  • The code imports through an alias like @/components, and the tsconfig has no matching paths entry.
  • In a Vite project, paths was added to the root tsconfig.json but not to tsconfig.app.json.
  • The package isn’t installed, or it was installed in a different folder than the one that holds package.json.
  • An image, SVG, or CSS file is imported, and the project doesn’t load Vite’s client types that declare them.
  • The file was moved or renamed, or its letter case differs from the import.

How to fix it

  1. Read the name in quotes. @/ or ~/ is an alias, ./ or ../ is a file, and a bare name like zod is a package.
  2. For an alias, add "paths": { "@/*": ["./src/*"] } under compilerOptions in tsconfig.app.json for Vite, or in tsconfig.json for Next.js, pointing at the folder your code lives in.
  3. Make the bundler agree. Vite 8 reads those paths when you set resolve.tsconfigPaths: true; older Vite versions need the same alias under resolve.alias. Next.js reads paths on its own.
  4. For a package, run npm install with its name in the folder that holds package.json.
  5. For images, SVGs, and CSS, add "vite/client" to types in tsconfig.app.json, or keep the /// <reference types="vite/client" /> line in src/vite-env.d.ts.
  6. Restart the TypeScript server in your editor, then run npx tsc -b in Vite or npx tsc --noEmit in Next.js to confirm the error is gone.

Example fix

// tsconfig.app.json in Vite, or tsconfig.json in Next.js
{
  "compilerOptions": {
    // Lets TypeScript resolve imports like '@/components/Header'.
    "paths": {
      "@/*": ["./src/*"]
    },
    // Declares imports of images, SVGs, and CSS files in Vite.
    "types": ["vite/client"]
  }
}

Related errors

All errors
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.

./src/app/page.tsx:2:1 Module not found: Can't resolve '@/components/Header'

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.

[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.

src/App.tsx:14:22 - error TS2339: Property 'title' does not exist on type 'Todo'.

Property does not exist on type

TypeScript can’t find that field on the type it has for this value, either because the type is wrong or because the value might not have it.

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