How to fix Failed to resolve import. Does the file exist? in React

ReactINTERMEDIATEHIGHUpdated Dec 11, 2025· 1,180 views

This Vite error occurs when the bundler cannot locate an imported module, typically due to incorrect paths, missing dependencies, or misconfigured path aliases.

Quick fix

Fixes Failed to resolve import. Does the file exist?

// ❌ Wrong - filename case mismatch
import Button from './components/button';  // file is Button.tsx

// ✅ Correct - exact case match
import Button from './components/Button';

// ❌ Wrong - missing file extension for non-standard imports
import config from './config';  // Vite may not find config.ts

// ✅ Correct - explicit extension
import config from './config.ts';
  1. Verify the file exists and path is correct
  2. Install missing dependencies
  3. Clear Vite cache
  4. Configure path aliases in both Vite and TypeScript
react — error
// ❌ Wrong - filename case mismatch
import Button from './components/button';  // file is Button.tsx
// ✅ Correct - exact case match
import Button from './components/Button';
// ❌ Wrong - missing file extension for non-standard imports
import config from './config';  // Vite may not find config.ts
// ✅ Correct - explicit extension
import config from './config.ts';
Failed to resolve import. Does the file exist?

What this error means

This error appears when Vite's import resolution system fails to find a module you're trying to import in your React application. Vite uses a sophisticated module resolution system that checks multiple locations and file extensions, but when it exhausts all possibilities, it throws this error asking "Does the file exist?" The error can manifest in different forms depending on the plugin involved: "[plugin:vite:import-analysis] Failed to resolve import" during development or "[vite]: Rollup failed to resolve import" during builds. Both indicate the same underlying issue - Vite cannot map your import statement to an actual file on disk. This is particularly common when migrating from Create React App to Vite, using custom path aliases, or working with monorepos where module resolution paths differ from standard Node.js conventions.

Typical symptoms

  • Development server crashes with "Failed to resolve import" message
  • Build process fails with Rollup resolution errors
  • Import statements that worked in Create React App fail in Vite
  • Path aliases (like @/components) not recognized
  • Case-sensitive filename issues on different operating systems
  • Errors appear after deleting node_modules and reinstalling

Common causes

  1. Module not installed in node_modules or package.json
  2. Incorrect import path or filename casing mismatch
  3. Path aliases configured in tsconfig.json but not in vite.config.ts
  4. Missing file extensions in imports when Vite cannot infer the type
  5. ESM-only packages imported using CommonJS require syntax
  6. Stale Vite cache after file structure changes
  7. Monorepo dependencies not properly exported or linked
  8. Special characters or spaces in file/folder names

How to fix "Failed to resolve import. Does the file exist?"

1Verify the file exists and path is correct

First, confirm the imported file actually exists at the expected location. Check for common mistakes:

typescript
// ❌ Wrong - filename case mismatch
import Button from './components/button';  // file is Button.tsx

// ✅ Correct - exact case match
import Button from './components/Button';

// ❌ Wrong - missing file extension for non-standard imports
import config from './config';  // Vite may not find config.ts

// ✅ Correct - explicit extension
import config from './config.ts';

Remember that Linux and macOS are case-sensitive, even if your Windows development environment isn't.

2Install missing dependencies

If importing a package from node_modules, ensure it's installed:

bash
# Check if package exists
npm list package-name

# Install if missing
npm install package-name

# Or for clean reinstall
rm -rf node_modules package-lock.json
npm install

For React-specific packages, verify React itself is installed:

bash
npm install react react-dom
3Clear Vite cache

Vite caches module resolution to improve performance. After file moves or renames, clear the cache:

bash
# Remove Vite cache directory
rm -rf node_modules/.vite

# Restart dev server
npm run dev

You can also try Vite's force flag to skip cache:

bash
vite --force
4Configure path aliases in both Vite and TypeScript

Path aliases require configuration in TWO places - Vite for bundling and TypeScript for type checking.

vite.config.ts:

typescript
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

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

tsconfig.json:

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

Alternatively, use the vite-tsconfig-paths plugin to automatically sync:

bash
npm install -D vite-tsconfig-paths
typescript
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
});
5Fix JSX runtime configuration for CRA migrations

When migrating from Create React App, you may need to configure the JSX runtime:

typescript
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react({
      jsxRuntime: 'classic' // Use classic JSX transform
    })
  ],
});

Or ensure React is in scope for automatic runtime:

typescript
// At the top of JSX files
import React from 'react';
6Handle ESM-only packages correctly

Some modern packages are ESM-only and cannot be imported with require(). Check the error message for clues:

typescript
// ❌ Wrong - using CommonJS
const module = require('esm-only-package');

// ✅ Correct - using ESM
import module from 'esm-only-package';

For monorepos, explicitly include linked dependencies in Vite's optimization:

typescript
// vite.config.ts
export default defineConfig({
  optimizeDeps: {
    include: ['linked-package-name']
  }
});

Advanced notes

File Extension Resolution:
Vite checks extensions in this order: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json']. While it's tempting to omit extensions, explicitly including them (especially for .tsx/.jsx files) reduces filesystem checks and makes imports more explicit.

Monorepo Considerations:
In monorepo setups (Yarn workspaces, pnpm workspaces, Lerna), ensure linked packages export proper ESM and are included in optimizeDeps.include. Symlink resolution can also cause issues - set resolve.preserveSymlinks: false in vite.config.ts if needed.

Conditional Exports:
Packages using conditional exports in package.json may need additional resolve.conditions configuration. Check the package documentation for required conditions.

Case Sensitivity:
Even if your development OS is case-insensitive (Windows/macOS), your production environment (Linux) likely isn't. Use consistent casing everywhere to avoid "works on my machine" issues.

Version-Specific Bugs:
Some Vite versions (notably 5.1.0-beta.4 and 7.0.5) had regressions in import resolution. If you encounter persistent issues after trying all solutions, check the Vite changelog and consider upgrading or downgrading.

Frequently asked questions

What does "Failed to resolve import. Does the file exist?" mean?
This error appears when Vite's import resolution system fails to find a module you're trying to import in your React application. " The error can manifest in different forms depending on the plugin involved: "[plugin:vite:import-analysis] Failed to resolve import" during development or "[vite]: Rollup failed to resolve import" during builds. Both indicate the same underlying issue - Vite cannot map your import statement to an actual file on disk.
How do I fix "Failed to resolve import. Does the file exist?"?
This Vite error occurs when the bundler cannot locate an imported module, typically due to incorrect paths, missing dependencies, or misconfigured path aliases.
What causes "Failed to resolve import. Does the file exist?"?
Module not installed in node_modules or package.json Incorrect import path or filename casing mismatch Path aliases configured in tsconfig.json but not in vite.config.ts
Is the "Failed to resolve import. Does the file exist?" error serious?
Yes. This is a high-severity error that usually blocks work until it is fixed, but the steps above resolve it.

Official resources & further reading