Cannot find module 'X' or its corresponding type declarations

// Example of TS2307 error
import axios from 'axios'; // Error: Cannot find module 'axios'

import { helper } from './utils/helper'; // Error: Cannot find module './utils/helper'

// ❌ Package not in node_modules
import lodash from 'lodash'; // Error!

// ✅ Install the package
// npm install lodash
// npm install --save-dev @types/lodash

// Package exists but has no built-in types
import express from 'express'; // Error: Could not find type declarations

// ✅ Install types separately
// npm install --save-dev @types/express

// File structure:
// src/
//   components/
//     Button.tsx
//   utils/
//     helper.ts

// In Button.tsx:
// ❌ Wrong path
import { helper } from './helper'; // Error!

// ✅ Correct relative path
import { helper } from '../utils/helper';

// Some configurations require extensions
// ❌ Might not work
import { config } from './config';

// ✅ With extension (for ESM or specific configs)
import { config } from './config.js';
// Note: Use .js even for .ts files in some ESM setups

// ❌ Using alias without configuration
import { Button } from '@/components/Button'; // Error!

// ✅ Configure paths in tsconfig.json first

// ❌ TypeScript doesn't understand non-JS imports by default
import styles from './styles.css'; // Error!
import logo from './logo.png'; // Error!

# Install the package
npm install package-name

# If types are separate
npm install --save-dev @types/package-name

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

// Now you can use:
import { Button } from '@components/Button';

// src/types/assets.d.ts
declare module '*.css' {
    const content: { [className: string]: string };
    export default content;
}

declare module '*.png' {
    const src: string;
    export default src;
}

declare module '*.svg' {
    import * as React from 'react';
    export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
    const src: string;
    export default src;
}

// src/types/untyped-package.d.ts
declare module 'untyped-package' {
    export function someFunction(param: string): void;
    export interface SomeInterface {
        prop: string;
    }
    export default class MainClass {
        constructor(options: object);
    }
}

// Or for quick fix (not recommended for production)
declare module 'untyped-package';

// tsconfig.json
{
    "compilerOptions": {
        // For Node.js projects
        "moduleResolution": "node",

        // For modern bundlers (Vite, etc.)
        "moduleResolution": "bundler",

        // For Node.js 16+ with ESM
        "moduleResolution": "node16"
    }
}

// Required packages for React TypeScript project
npm install react react-dom
npm install --save-dev typescript @types/react @types/react-dom

// tsconfig.json
{
    "compilerOptions": {
        "jsx": "react-jsx",
        "moduleResolution": "bundler",
        "esModuleInterop": true
    }
}

// tsconfig.json for Next.js
{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": ["./*"]
        }
    }
}

// Usage
import { Button } from '@/components/Button';
import { api } from '@/lib/api';

// In a monorepo, reference other packages
// tsconfig.json
{
    "compilerOptions": {
        "paths": {
            "@myorg/shared": ["../../packages/shared/src"],
            "@myorg/ui": ["../../packages/ui/src"]
        }
    },
    "references": [
        { "path": "../../packages/shared" },
        { "path": "../../packages/ui" }
    ]
}