How to fix Module 'X' does not have a default export in TypeScript

// Check library documentation for correct import syntax
// Example: React only has named exports for components
import React from 'react';  // ❌ Wrong - React doesn't have default export
import { useState } from 'react';  // ✅ Correct - named import

// For your own modules, check the export statements:
// File: utils.ts
export function formatDate() { ... }  // Named export
export const MAX_ITEMS = 100;         // Named export
// No "export default ..." means no default export

// To import correctly:
import { formatDate, MAX_ITEMS } from './utils';  // ✅
import utils from './utils';  // ❌ No default export

// BEFORE (causing error):
import moment from 'moment';  // Error if moment doesn't have default export

// AFTER (using named import):
import { format, parseISO } from 'date-fns';  // date-fns uses named exports

// For libraries with a main default export AND named exports:
import React, { useState, useEffect } from 'react';  // React has both

// If you want to import everything as an object:
import * as utils from './utils';  // Then use utils.formatDate()

// tsconfig.json
{
  "compilerOptions": {
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

// CommonJS module (express.js):
// module.exports = express;

// With esModuleInterop: true
import express from 'express';  // ✅ Works
const app = express();

// Without esModuleInterop: true
import * as express from 'express';  // Alternative syntax
const app = express.default();

// File: calculator.ts
// BEFORE (only named exports):
export function add(a: number, b: number) { return a + b; }
export function subtract(a: number, b: number) { return a - b; }

// AFTER (adding default export):
export function add(a: number, b: number) { return a + b; }
export function subtract(a: number, b: number) { return a - b; }

// Option 1: Export an object as default
export default { add, subtract };

// Option 2: Export a main function as default
export default function calculate(operation: string, a: number, b: number) {
  // ...
}

// Now both imports work:
import calc from './calculator';  // Default import
import { add } from './calculator';  // Named import

// File: types.ts
export interface User { id: string; name: string; }
export type Status = 'active' | 'inactive';

// WRONG - trying to default import a type
import User from './types';  // Error: Module has no default export

// CORRECT - import type with named imports
import type { User, Status } from './types';

// For mixed imports (values and types):
import { getUser } from './api';  // Runtime function
import type { User } from './types';  // Type only

// TypeScript 5.0+ inline syntax:
import { getUser, type User } from './api';

// package.json of a library
{
  "name": "my-library",
  "exports": {
    ".": {
      "import": "./dist/esm/index.js",  // ES modules
      "require": "./dist/cjs/index.js",  // CommonJS
      "types": "./dist/types/index.d.ts"
    },
    "./utils": {
      "import": "./dist/esm/utils.js",
      "require": "./dist/cjs/utils.js",
      "types": "./dist/types/utils.d.ts"
    }
  }
}