How to fix Module has no default export in React

First, examine how the module you're trying to import actually exports its values. Open the source file and look for the export statement.

Named export examples:

// Named exports
export const MyComponent = () => { ... };
export function MyComponent() { ... }
export { MyComponent };

Default export examples:

// Default exports
export default MyComponent;
export default function MyComponent() { ... }

If you're importing from a third-party library, check the package's index.d.ts file in node_modules/@types/[package] or the library's TypeScript definition files.

If the module uses named exports, update your import statement to use curly braces:

Before (incorrect default import):

import MyComponent from './MyComponent';

After (correct named import):

import { MyComponent } from './MyComponent';

For multiple named imports:

import { Component1, Component2, utilFunction } from './module';

This is the most common and recommended fix, as it aligns your import with the actual export type.

If a module has many named exports or you want to avoid naming conflicts, use namespace import syntax:

import * as MyModule from './MyModule';

// Then use as:
<MyModule.Component />
MyModule.utilFunction();

This approach is particularly useful when:
- The module has many exports and you need most of them
- You want to make the module origin clear in your code
- Working with React itself: import * as React from 'react'

If you're working with CommonJS modules or need compatibility with certain libraries, enable synthetic default imports in tsconfig.json:

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

Important: This only affects TypeScript type-checking, not runtime behavior. Use this when:
- Importing CommonJS modules that use module.exports
- Working with libraries designed for different module systems
- You have no control over the export style

Note: While this fixes the TypeScript error, it doesn't change the actual module behavior. The bundler (Webpack/Vite) must still support the import style.

If you own the module being imported and want to support default imports, change the export to default:

Before (named export):

export const MyComponent = () => {
  return <div>Hello</div>;
};

After (default export):

const MyComponent = () => {
  return <div>Hello</div>;
};

export default MyComponent;

Or use the inline syntax:

export default function MyComponent() {
  return <div>Hello</div>;
}

Best practice: Modern React style guides generally recommend named exports for better refactoring and IDE support, so only use this approach if you have a specific reason to prefer default exports.

After making changes, verify the error is resolved:

# Run TypeScript compiler
npx tsc --noEmit

# Or if using Next.js
npm run build

# For Create React App
npm run build

Ensure your IDE (VS Code, WebStorm) no longer shows red squiggly lines under the import. Restart the TypeScript language server if needed:
- VS Code: Cmd/Ctrl + Shift + P → "TypeScript: Restart TS Server"