How to fix Module has no default export in TypeScript

// If the module looks like this (named exports):
export const myFunction = () => {};
export const MY_CONSTANT = 'value';

// You need to import like this:
import { myFunction, MY_CONSTANT } from './module';

// Or import everything:
import * as module from './module';

// Before (causes error):
import myModule from './module';

// After (correct):
import { specificExport } from './module';
// or
import * as myModule from './module';

// In the module file:
const mainFunction = () => { /* ... */ };
const helperFunction = () => { /* ... */ };

// Export named exports as usual
export { helperFunction };

// Add a default export
export default mainFunction;

// Now this import works:
import mainFunction from './module';
import { helperFunction } from './module';

export { mainFunction as default };

{
  "compilerOptions": {
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

// Old version (default export):
import React from 'react';

// New version (named export):
import { useState, useEffect } from 'react';

// Some libraries support both:
import React from 'react'; // default
import { useState } from 'react'; // named

// Dynamic import (async)
const module = await import('./module');
const { namedExport } = module;

// CommonJS require (if module uses module.exports)
const module = require('./module');
// or with TypeScript interop
import * as module from './module';

// Type assertion as last resort
import * as module from './module';
const defaultExport = (module as any).default;