How to fix React.lazy: the lazy component did not export a default component in React

ReactBEGINNERMEDIUMUpdated Dec 10, 2025· 140 views

React.lazy only works with default exports. This error occurs when you try to lazy-load a component that uses named exports instead. Learn how to fix this by using Promise chaining or creating an intermediate module.

Quick fix

Fixes React.lazy: the lazy component did not export a default component

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

// Wrong - named export
export const MyComponent = () => {
  return <div>Hello</div>;
};
  1. Verify the component uses a default export
  2. If using named exports, use Promise chaining
  3. Alternatively, create an intermediate module
  4. Ensure Suspense wraps your lazy component
react — error
// Correct - default export
export default function MyComponent() {
  return <div>Hello</div>;
}
// Wrong - named export
export const MyComponent = () => {
  return <div>Hello</div>;
};
React.lazy: the lazy component did not export a default component

What this error means

React.lazy() is a React function that enables code-splitting by lazy-loading components. It expects the imported module to have a default export containing a valid React component. When you try to lazy-load a component that uses named exports (export const MyComponent = ...) instead of a default export (export default MyComponent), React.lazy cannot find the component and throws this error. This is a limitation of React.lazy itself—it currently doesn't support named exports directly. The module must resolve to an object with a .default property that contains the React component.

Typical symptoms

  • React.lazy throws an error during component loading
  • Error message: 'did not export a default component'
  • Application fails to render the lazy-loaded component
  • Suspense boundary shows error state instead of fallback
  • No component is rendered at the fallback location

Common causes

  1. The imported module uses named exports (export const Component) instead of default export (export default Component)
  2. The component file doesn't have any export statement at all
  3. Incorrect import path leading to a module without a default export
  4. TypeScript or build tool configuration issue preventing proper module resolution

How to fix "React.lazy: the lazy component did not export a default component"

1Verify the component uses a default export

Check that your component file has export default at the top level:

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

// Wrong - named export
export const MyComponent = () => {
  return <div>Hello</div>;
};
2If using named exports, use Promise chaining

If your component uses named exports, modify your React.lazy call to chain the import Promise and provide a default export:

javascript
import { lazy, Suspense } from 'react';

// Wrap named export in default for React.lazy
const MyComponent = lazy(() =>
  import('./MyComponent').then(module => ({
    default: module.MyComponent
  }))
);

// Use with Suspense
export default function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}
3Alternatively, create an intermediate module

Create a wrapper file that re-exports the named export as default:

MyComponent.jsx (original file with named export)

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

MyComponentLazy.jsx (new wrapper)

javascript
export { MyComponent as default } from './MyComponent';

App.jsx (use the wrapper)

javascript
import { lazy, Suspense } from 'react';

const MyComponent = lazy(() => import('./MyComponentLazy'));

export default function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}
4Ensure Suspense wraps your lazy component

Always wrap lazy components in a Suspense boundary with a fallback UI:

javascript
import { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

export default function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

The fallback will display while the component is being loaded.

Advanced notes

For TypeScript projects, the Promise chaining approach works seamlessly. The intermediate module approach is cleaner if you're using multiple lazy imports from the same named export file. Consider your project structure when choosing between the two solutions.

If you're using React Router or Next.js, they may provide their own code-splitting utilities that support named exports. Check your framework's documentation for alternatives to React.lazy.

Frequently asked questions

What does "React.lazy: the lazy component did not export a default component" mean?
lazy() is a React function that enables code-splitting by lazy-loading components. It expects the imported module to have a default export containing a valid React component. lazy cannot find the component and throws this error.
How do I fix "React.lazy: the lazy component did not export a default component"?
React.lazy only works with default exports. This error occurs when you try to lazy-load a component that uses named exports instead. Learn how to fix this by using Promise chaining or creating an intermediate module.
What causes "React.lazy: the lazy component did not export a default component"?
The imported module uses named exports (export const Component) instead of default export (export default Component) The component file doesn't have any export statement at all Incorrect import path leading to a module without a default export
Is the "React.lazy: the lazy component did not export a default component" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading