How to fix Cannot find module or its corresponding type declarations in React

Open your tsconfig.json and verify the moduleResolution setting. For Vite projects, try changing it to "node" if you're experiencing issues with "bundler":

{
  "compilerOptions": {
    "moduleResolution": "node",  // Changed from "bundler"
    "module": "ESNext",
    "target": "ESNext"
  }
}

If the error persists, you can also try "node16" or "nodenext" for more modern Node.js resolution:

{
  "compilerOptions": {
    "moduleResolution": "node16"
  }
}

After making changes, restart your TypeScript server in VS Code (Ctrl/Cmd + Shift + P → "TypeScript: Restart TS Server").

If the error is for a specific third-party package, check if it has type definitions available:

# For npm
npm install --save-dev @types/package-name

# For yarn
yarn add --dev @types/package-name

# For pnpm
pnpm add -D @types/package-name

For example, if you're importing lodash:

npm install --save-dev @types/lodash

Some packages (like React, Vite plugins) include their own types and don't need separate @types packages.

Vite requires explicit type reference for client-side environment shims. In your tsconfig.json, ensure you include vite/client:

{
  "compilerOptions": {
    "types": ["vite/client"]
  }
}

If you have other type packages, add vite/client to the array:

{
  "compilerOptions": {
    "types": ["vite/client", "node", "jest"]
  }
}

This provides types for Vite-specific features like import.meta.env and asset imports.

If you're using path aliases, they must be configured in both vite.config.ts and tsconfig.json.

In vite.config.ts:

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components')
    }
  }
});

In tsconfig.json:

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

Ensure the paths match exactly between both files.

Make sure TypeScript is tracking the files you're trying to import. Check your tsconfig.json:

{
  "include": [
    "src/**/*",
    "src/**/*.ts",
    "src/**/*.tsx",
    "vite.config.ts"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

If you're importing from a custom directory (e.g., lib/, utils/), ensure it's covered by the include pattern. Add specific paths if needed:

{
  "include": [
    "src/**/*",
    "lib/**/*",  // Add custom directories
    "types/**/*"
  ]
}

A corrupted or incomplete node_modules directory can cause module resolution failures. Delete it and reinstall:

# Remove existing modules and lock files
rm -rf node_modules
rm package-lock.json  # or yarn.lock or pnpm-lock.yaml

# Reinstall
npm install
# or: yarn install
# or: pnpm install

For pnpm specifically, if using symlinks is causing issues, you can add baseUrl to tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "./node_modules"
  }
}

After reinstalling, restart your development server and TypeScript server.