How to fix React.lazy: the factory function must be a function component in React

ReactINTERMEDIATEHIGH

This error occurs when React.lazy() receives a factory function that doesn't resolve to a valid React function component. The import must have a default export that is a functional component, class component, or memo/forwardRef wrapper.

What this error means

React.lazy() is used for code-splitting and dynamic imports of React components. It expects a factory function that returns a Promise resolving to a module with a default export containing a valid React component. If the factory doesn't resolve to a function or class component, React throws this error.

Typical symptoms

How to fix "React.lazy: the factory function must be a function component"

1Verify the component has a default export

Ensure the lazy-loaded component file exports a valid React component as default.

jsx

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

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

2Wrap the import in a factory function

React.lazy() expects a factory function, not the import result directly. The factory must return a Promise.

jsx

// ✓ Correct
const MyComponent = React.lazy(() => import('./MyComponent'));

// ✗ Wrong - passing import directly
const MyComponent = React.lazy(import('./MyComponent'));

3Convert named exports to default if using lazy loading

React.lazy only works with default exports. If your component uses named exports, convert it to a default export:

jsx

// MyComponent.jsx - before
export function MyComponent() {
  return <div>Content</div>;
}

// MyComponent.jsx - after
function MyComponent() {
  return <div>Content</div>;
}
export default MyComponent;

4If using named exports, create a re-export wrapper

If you can't change the original component's export, create a wrapper module:

jsx

// MyComponent.jsx (original - uses named export)
export function MyComponent() {
  return <div>Content</div>;
}

// MyComponent.lazy.js (wrapper)
export { MyComponent as default } from './MyComponent';

// In your app
const MyComponent = React.lazy(() => import('./MyComponent.lazy'));

5Wrap the lazy component in Suspense

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

jsx

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

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

6Verify the factory function resolves to a React component

Test that your import resolves correctly in the browser console:

jsx

// Check if the import resolves to a function/component
import('./MyComponent').then((module) => {
  console.log(module.default); // Should be a function or class
  console.log(typeof module.default); // Should be 'function'
});

How to fix React.lazy: the factory function must be a function component in React

What this error means

Typical symptoms

Common causes

How to fix "React.lazy: the factory function must be a function component"

Advanced notes

Related errors

Official resources & further reading