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

ReactINTERMEDIATEMEDIUMUpdated Dec 11, 2025· 334 views

This TypeScript error occurs when the compiler cannot locate a module or its type definitions in your Vite project, often due to incorrect tsconfig.json settings or missing type packages.

Quick fix

Fixes Cannot find module or its corresponding type declarations

{
  "compilerOptions": {
    "moduleResolution": "node",  // Changed from "bundler"
    "module": "ESNext",
    "target": "ESNext"
  }
}
  1. Check and adjust moduleResolution in tsconfig.json
  2. Install missing type declarations
  3. Add vite/client to compiler types
  4. Sync path aliases between Vite config and tsconfig
react — error
{
  "compilerOptions": {
    "moduleResolution": "node",  // Changed from "bundler"
    "module": "ESNext",
    "target": "ESNext"
  }
}
Cannot find module or its corresponding type declarations

What this error means

This error appears when TypeScript cannot resolve a module import in your Vite project. TypeScript needs to find either the actual module code or separate type declaration files (.d.ts) to provide type checking and IntelliSense. The error is particularly common in Vite projects created with the react-ts template because Vite uses modern module resolution strategies that may conflict with certain TypeScript configurations. When TypeScript encounters an import statement, it follows specific resolution rules based on your tsconfig.json settings to locate the module and its types. The moduleResolution compiler option plays a critical role here. Vite projects work best with "bundler" mode (introduced in TypeScript 5.0), which assumes a bundler will handle module resolution at runtime. However, some packages or configurations may require "node" or "node16" resolution modes instead.

Typical symptoms

  • Red squiggly lines under import statements in your IDE
  • TypeScript compiler errors when running vite build or tsc
  • Error appears for third-party packages installed via npm/yarn/pnpm
  • Importing local modules with custom paths or aliases fails
  • Code runs successfully but TypeScript shows type errors

Common causes

  1. tsconfig.json has moduleResolution set to "bundler" but the package requires "node" or "node16"
  2. Missing @types/* package for a third-party library that lacks built-in types
  3. Incorrect path aliases configuration between vite.config.ts and tsconfig.json
  4. Module is not included in the TypeScript compilation scope (include/exclude arrays)
  5. Corrupted or incomplete node_modules directory from failed installation
  6. Package.json "exports" field conflicts with TypeScript's type resolution
  7. Using pnpm with symlinked modules without proper baseUrl configuration

How to fix "Cannot find module or its corresponding type declarations"

1Check and adjust moduleResolution in tsconfig.json

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

json
{
  "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:

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

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

2Install missing type declarations

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

bash
# 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:

bash
npm install --save-dev @types/lodash

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

3Add vite/client to compiler types

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

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

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

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

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

4Sync path aliases between Vite config and tsconfig

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

In vite.config.ts:

typescript
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:

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

Ensure the paths match exactly between both files.

5Verify include and exclude arrays in tsconfig.json

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

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:

json
{
  "include": [
    "src/**/*",
    "lib/**/*",  // Add custom directories
    "types/**/*"
  ]
}
6Clean install node_modules

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

bash
# 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:

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

After reinstalling, restart your development server and TypeScript server.

Advanced notes

TypeScript 5.0+ and moduleResolution "bundler": The "bundler" module resolution mode was introduced in TypeScript 5.0 specifically for projects using bundlers like Vite, Webpack, or esbuild. It assumes the bundler will handle module resolution and doesn't require file extensions on relative imports. However, some older packages or packages with complex "exports" fields in package.json may not work correctly with this mode.

Package.json "exports" field conflicts: Modern npm packages use the "exports" field to define entry points. TypeScript's bundler mode respects these exports, but if a package has types at a path like /node_modules/package/types/index.d.ts that isn't listed in "exports", TypeScript won't be able to find them. In these cases, switching to "node" or "node16" resolution can help.

skipLibCheck consideration: Vite starter templates set "skipLibCheck": true in tsconfig.json by default. This tells TypeScript to skip type checking of declaration files in node_modules, which can hide type errors from dependencies but speeds up compilation. If you're debugging type resolution issues, temporarily setting this to false may reveal the root cause.

Multiple tsconfig files: Vite projects often have both tsconfig.json (for app code) and tsconfig.node.json (for config files like vite.config.ts). Make sure you're editing the correct one for the file showing the error. Config files should reference tsconfig.node.json, while source files use tsconfig.json.

Frequently asked questions

What does "Cannot find module or its corresponding type declarations" mean?
This error appears when TypeScript cannot resolve a module import in your Vite project. ts) to provide type checking and IntelliSense. The error is particularly common in Vite projects created with the react-ts template because Vite uses modern module resolution strategies that may conflict with certain TypeScript configurations.
How do I fix "Cannot find module or its corresponding type declarations"?
This TypeScript error occurs when the compiler cannot locate a module or its type definitions in your Vite project, often due to incorrect tsconfig.json settings or missing type packages.
What causes "Cannot find module or its corresponding type declarations"?
tsconfig.json has moduleResolution set to "bundler" but the package requires "node" or "node16" Missing @types/* package for a third-party library that lacks built-in types Incorrect path aliases configuration between vite.config.ts and tsconfig.json
Is the "Cannot find module or its corresponding type declarations" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading