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

ReactINTERMEDIATEHIGHUpdated Dec 10, 2025· 155 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

react — error

$// ✓ Correct
function MyComponent() {
  return <div>Hello</div>;
}
export default MyComponent;
// ✗ Wrong - no default export
export function MyComponent() {
  return <div>Hello</div>;
}
React.lazy: the factory function must be a function component

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

Runtime error: 'React.lazy: the factory function must be a function component'
Lazy-loaded component fails to render
App crashes or shows blank screen where lazy component should appear
Error occurs only after the lazy component attempts to load

Common causes

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
Passing the import directly to lazy() instead of wrapping it in a function: lazy(import('./Comp')) instead of lazy(() => import('./Comp'))
Re-exporting a non-component value as the default export

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'
});

Advanced notes

React.lazy() uses dynamic import() which is a runtime feature supported in modern bundlers (webpack, Vite, etc.). The factory function is called on-demand when the component is first rendered, not when the module loads. The Promise must resolve to an object with a .default property containing the actual component. This works with function components, class components, React.memo(), and React.forwardRef(). Do not use React.lazy() for class components at the top level without wrapping, though lazy-loaded class components themselves are valid. For error boundaries around lazy components, wrap the Suspense boundary in an Error Boundary component to gracefully handle loading failures.

Frequently asked questions

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.
How do I fix "React.lazy: the factory function must be a function component"?: 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 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
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.

Official resources & further reading

📚React Official Documentation