Cannot find module './Component' or its corresponding type declarations

What causes this

TypeScript can’t resolve an import. This doesn’t necessarily mean the file is missing — it often means TypeScript doesn’t know how to find it or doesn’t have type information for it. Common causes:

• The file genuinely doesn’t exist (typo in the path)
• You’re importing a non-TypeScript file (CSS, SVG, JSON, images) without type declarations
• Path aliases (@/components/...) aren’t configured in tsconfig.json
• A third-party package doesn’t ship types and there’s no @types/ package for it

Fix 1: Check if the file actually exists

# Does the file exist?
ls src/components/Component.tsx

Common mistakes:

• Wrong case: ./component vs ./Component (matters on Linux, not on macOS)
• Missing extension: TypeScript resolves .ts, .tsx, .js, .jsx automatically, but not other extensions
• Wrong relative path: ./ vs ../

Fix 2: Add type declarations for non-TS files

If you’re importing CSS, SVG, images, or other assets, create a declaration file:

// src/types.d.ts (or src/env.d.ts)
declare module '*.css' {
  const content: Record<string, string>;
  export default content;
}

declare module '*.svg' {
  const content: string;
  export default content;
}

declare module '*.png' {
  const src: string;
  export default src;
}

declare module '*.json' {
  const value: any;
  export default value;
}

Make sure this file is included in your tsconfig.json:

{
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/types.d.ts"]
}

Fix 3: Configure path aliases

If you’re using @/ imports:

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

Note: if you’re using Vite, Next.js, or another bundler, you also need to configure the alias there — TypeScript’s paths only affects type checking, not bundling.

Fix 4: Install type definitions

For third-party packages without built-in types:

# Check if @types/ exists
npm install -D @types/package-name

If there’s no @types/ package, create a local declaration:

// src/types.d.ts
declare module 'untyped-package' {
  export function doSomething(input: string): string;
  // Or just allow anything:
  const mod: any;
  export default mod;
}

Fix 5: Check tsconfig include/exclude

Your file might exist but be excluded from TypeScript’s scope:

{
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

If the file is outside src/, it won’t be found unless you expand include.

Related resources

• TypeScript cheat sheet
• TypeScript complete guide

How to prevent it

• Create a types.d.ts file early in your project for asset imports (CSS, SVG, images)
• Set up path aliases in both tsconfig.json and your bundler config at the start
• Use consistent casing in file names — stick to PascalCase for components, kebab-case for utilities
• Run tsc --noEmit in CI to catch module resolution errors before they reach production