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

// ❌ 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';

# 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

npm install react react-dom

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

# Restart dev server
npm run dev

vite --force

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'),
    },
  },
});

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

npm install -D vite-tsconfig-paths

// 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()],
});

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

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

// At the top of JSX files
import React from 'react';

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

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

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