How to fix Cannot find module './X' in TypeScript

import { MyComponent } from './components/MyComponent';

# From project root, list the target directory
ls -la src/pages/components/

# Check the exact filename
ls -la src/pages/components/MyComponent*

import { MyComponent } from './components/MyComponent';

import { MyComponent } from './components/MyComponent.ts';
// or for React:
import { MyComponent } from './components/MyComponent.tsx';

import React from 'react';  // Correct
import React from 'react.ts';  // Wrong

// Wrong (will fail on Linux):
import { MyComponent } from './mycomponent';

// Correct:
import { MyComponent } from './MyComponent';

{
  "compilerOptions": {
    "forceConsistentCasingInFileNames": true
  }
}

# List files with exact case
ls -la src/components/ | grep -i mycomponent

# Find the file
find src -name "*mycomponent*" -o -name "*MyComponent*"

src/
├── pages/
│   └── home.ts
├── components/
│   └── Header.ts
└── utils/
    └── helpers.ts

// Wrong (looking in wrong directory):
import { Header } from './Header';  // Looks in src/pages/, not src/components/

// Correct (go up one level, then into components):
import { Header } from '../components/Header';

// Correct:
import { someHelper } from '../utils/helpers';

# Current file: src/pages/home.ts
# Target file: src/components/Header.ts

# From src/pages/, count steps to src/components/:
# 1. Go up: ../ (now in src/)
# 2. Go into: components/ (now in src/components/)
# Result: ../components/Header

{
  "compilerOptions": {
    "moduleResolution": "node",
    "module": "commonjs",
    "target": "es2020"
  }
}

{
  "compilerOptions": {
    "moduleResolution": "node",
    "module": "esnext",
    "target": "es2020"
  }
}

// Wrong (old):
{
  "compilerOptions": {
    "moduleResolution": "classic"
  }
}

// Correct:
{
  "compilerOptions": {
    "moduleResolution": "node"
  }
}

{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "module": "esnext",
    "target": "es2020"
  }
}

# Check current tsconfig.json
cat tsconfig.json | grep -A 5 compilerOptions

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

// Instead of:
import { Header } from '../../../components/Header';
import { helpers } from '../../utils/helpers';

// Use cleaner aliases:
import { Header } from '@components/Header';
import { helpers } from '@utils/helpers';

# Verify TypeScript is installed
npx tsc --version

# Update TypeScript if needed
npm install --save-dev typescript@latest

# Or globally
npm install -g typescript@latest

# Clear cache
npm cache clean --force

# Reinstall everything
rm -rf node_modules package-lock.json
npm install

// MyComponent.ts - CORRECT (default export)
export default function MyComponent() {
  return <div>Hello</div>;
}

// Usage:
import MyComponent from './MyComponent';

// MyComponent.ts - CORRECT (named export)
export function MyComponent() {
  return <div>Hello</div>;
}

// Usage:
import { MyComponent } from './MyComponent';

// MyComponent.ts - WRONG (no export)
function MyComponent() {
  return <div>Hello</div>;
}

// This will fail:
import { MyComponent } from './MyComponent';  // Error: not exported!

// Add one of these to MyComponent.ts

// Option 1: Named export
export function MyComponent() { ... }

// Option 2: Default export
export default function MyComponent() { ... }

// Option 3: Export after definition
function MyComponent() { ... }
export { MyComponent };