typescript module_error ai_generated true

TS2307: Cannot find module '@/components/Button' or its corresponding type declarations

ID: typescript/ts-path-mapping-error

Also available as: JSON · Markdown
88%Fix Rate
90%Confidence
50Evidence
2023-01-01First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
5 active — — —

Root Cause

TypeScript path aliases (@/, ~/) are not configured or baseUrl is missing. Configure paths in tsconfig.json.

generic

Workarounds

  1. 92% success Configure baseUrl and paths in tsconfig.json 
    {
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "~/*": ["src/*"]
    }
  }
}

    Sources: https://www.typescriptlang.org/tsconfig#paths

  2. 85% success Also configure the bundler/runtime to resolve the same aliases 
    // vite.config.ts:
import { defineConfig } from 'vite';
import path from 'path';
export default defineConfig({
  resolve: {
    alias: { '@': path.resolve(__dirname, 'src') }
  }
});

    Sources: https://vitejs.dev/config/shared-options.html#resolve-alias

Dead Ends

Common approaches that don't work:

  1. Only configure paths without setting baseUrl 80% fail

    TypeScript requires baseUrl to be set when using paths; without it, path mappings are ignored

Error Chain

Leads to:
Preceded by:
Frequently confused with: