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

Q: What does "React.lazy: the factory function must be a function component" mean?

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.

Q: What causes "React.lazy: the factory function must be a function component"?

The imported module has no default export or exports a non-component value as default Using a named export instead of a default export from the lazy-loaded module The factory function resolves to undefined or null instead of a component

Q: Is the "React.lazy: the factory function must be a function component" error serious?

Yes. This is a high-severity error that usually blocks work until it is fixed, but the steps above resolve it.

ReactINTERMEDIATEHIGHLast verified Dec 10, 2025· 11 views

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.

Quick fix

Fixes React.lazy: the factory function must be a function component

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

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

Verify the component has a default export
Wrap the import in a factory function
Convert named exports to default if using lazy loading
If using named exports, create a re-export wrapper

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

Quick fix

What this error means

Typical symptoms

Common causes