How to fix Warning: lazy() resolving to the same value in React

ReactBEGINNERMEDIUMUpdated Dec 10, 2025· 127 views

This warning occurs when React.lazy() receives the same component value instead of a promise from a dynamic import. It typically happens when the lazy function is not properly structured to return an import() statement. Understanding the correct lazy() syntax and avoiding duplicate imports prevents this warning and ensures code-splitting works as intended.

Quick fix

Fixes Warning: lazy() resolving to the same value

// WRONG - static import, then lazy() wrapping the component
import MyComponent from "./MyComponent";
const LazyComponent = React.lazy(() => MyComponent);

// WRONG - returning the component directly
const LazyComponent = React.lazy(() => {
  return MyComponent;
});

// CORRECT - lazy() wraps a dynamic import() call
const LazyComponent = React.lazy(() => import("./MyComponent"));

// CORRECT - with explicit return
const LazyComponent = React.lazy(() => {
  return import("./MyComponent");
});
  1. Verify the lazy() syntax is correct
  2. Move the component out of the lazy() callback
  3. Use dynamic import with the correct return value
  4. Declare lazy components at module level
react — error
// WRONG - static import, then lazy() wrapping the component
import MyComponent from "./MyComponent";
const LazyComponent = React.lazy(() => MyComponent);
// WRONG - returning the component directly
const LazyComponent = React.lazy(() => {
  return MyComponent;
});
// CORRECT - lazy() wraps a dynamic import() call
const LazyComponent = React.lazy(() => import("./MyComponent"));
// CORRECT - with explicit return
const LazyComponent = React.lazy(() => {
  return import("./MyComponent");
});
Warning: lazy() resolving to the same value

What this error means

React.lazy() expects its callback function to return a Promise from a dynamic import() call that resolves to a module with a default export. When the lazy function resolves to the same value (particularly when it returns the component itself instead of importing it), React detects that the dynamic import is not actually loading a separate chunk and issues a warning. This indicates that code-splitting is not working as intended, and the component will not be split into a separate bundle. The warning is React's way of alerting developers that they are not using lazy loading correctly, which defeats the purpose of code-splitting for performance optimization.

Typical symptoms

  • Console warning: "Warning: lazy() resolving to the same value"
  • Component not being split into a separate bundle despite using React.lazy()
  • No improvement in initial bundle size or load performance
  • Suspense boundary not activating because the component loads immediately
  • Code-splitting not functioning as expected in production builds

Common causes

  1. Passing a non-dynamic import to lazy() - importing the component at the top level and passing a reference instead of a dynamic import
  2. Using a function that returns the component directly instead of an import statement
  3. Forgetting to use the import() syntax and instead using a regular require or import statement
  4. Wrapping an already-imported component in lazy() instead of wrapping an import() call
  5. Circular dependencies causing the module to load synchronously instead of as a dynamic chunk

How to fix "Warning: lazy() resolving to the same value"

1Verify the lazy() syntax is correct

React.lazy() requires a callback function that returns a Promise from a dynamic import() call. The most common mistake is passing a component directly or using a regular import statement.

typescript
// WRONG - static import, then lazy() wrapping the component
import MyComponent from "./MyComponent";
const LazyComponent = React.lazy(() => MyComponent);

// WRONG - returning the component directly
const LazyComponent = React.lazy(() => {
  return MyComponent;
});

// CORRECT - lazy() wraps a dynamic import() call
const LazyComponent = React.lazy(() => import("./MyComponent"));

// CORRECT - with explicit return
const LazyComponent = React.lazy(() => {
  return import("./MyComponent");
});
2Move the component out of the lazy() callback

If you are using a static import at the top of the file and then wrapping it in lazy(), move the import into the lazy() callback as a dynamic import. Remove any top-level import of the component.

typescript
// BEFORE
import MyComponent from "./MyComponent";
const LazyComponent = React.lazy(() => MyComponent);

// AFTER
const LazyComponent = React.lazy(() => import("./MyComponent"));
3Use dynamic import with the correct return value

Ensure the callback function in lazy() returns the Promise from import() directly, not a function that needs to be executed or a resolved value. The import() call itself returns a Promise.

typescript
// WRONG - returning a function that imports
const LazyComponent = React.lazy(() => {
  const importComponent = () => import("./MyComponent");
  return importComponent();
});

// CORRECT - returning the Promise directly
const LazyComponent = React.lazy(() => import("./MyComponent"));
4Declare lazy components at module level

Define lazy components outside of component functions, at the top level of the module. This ensures they are created once and reused, not recreated on every render. Creating lazy components inside render functions can cause unnecessary re-renders and defeat code-splitting benefits.

typescript
// CORRECT - declared at module level
const LazyDashboard = React.lazy(() => import("./Dashboard"));
const LazySettings = React.lazy(() => import("./Settings"));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <LazyDashboard />
    </Suspense>
  );
}

// WRONG - recreated on every render
function App() {
  const LazyDashboard = React.lazy(() => import("./Dashboard"));
  return (
    <Suspense fallback={<Loading />}>
      <LazyDashboard />
    </Suspense>
  );
}
5Use Suspense to handle the lazy-loaded component

Always wrap lazy components in a Suspense boundary to show a fallback while the component is loading. This is required for lazy() to work properly and gives the best user experience.

typescript
import { Suspense, lazy } from "react";

const LazyComponent = lazy(() => import("./MyComponent"));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}
6Check for circular dependencies

If the component you are trying to lazy-load imports the parent component, it creates a circular dependency that prevents dynamic loading. Refactor your code to remove circular imports by extracting shared code into a separate module that both components can import from.

typescript
// WRONG - circular dependency
// App.tsx imports LazyComponent
// LazyComponent imports App

const LazyComponent = lazy(() => import("./LazyComponent")); // Won't code-split

// CORRECT - extract shared logic
// utils.ts - contains shared code
// App.tsx imports utils
// LazyComponent imports utils (not App)

const LazyComponent = lazy(() => import("./LazyComponent")); // Code-splits correctly
7Verify code-splitting in production build

Build your application in production mode and inspect the output to confirm code-splitting is working. Use build analysis tools to verify that lazy-loaded components are in separate chunks.

bash
# For a typical React setup
npm run build

# For Next.js
npm run build

# Check the build output for separate chunk files for each lazy component
# You should see separate .js files for lazy-loaded components

Advanced notes

The "lazy() resolving to the same value" warning appears because React detects that the callback function did not actually return a Promise from a dynamic import - meaning no code-splitting can occur. This is purely a developer warning and does not break your application, but it indicates suboptimal code organization. React.lazy() is specifically designed to work with module bundlers like Webpack or Vite that support code-splitting of dynamic imports. If you are using a different bundler or setup, verify that it supports dynamic import() syntax. In Next.js, you can use the next/dynamic function instead of React.lazy() for better integration with Next.js routing and data fetching. Remember that lazy components must export a default export from their module - if a component uses named exports, create an intermediate module that re-exports it as the default. The Suspense boundary used with lazy() will only show its fallback UI while the chunk is being downloaded and parsed; once loaded, the component renders immediately without any loading delay on subsequent visits if the chunk is already cached by the browser.

Frequently asked questions

What does "Warning: lazy() resolving to the same value" mean?
lazy() expects its callback function to return a Promise from a dynamic import() call that resolves to a module with a default export. When the lazy function resolves to the same value (particularly when it returns the component itself instead of importing it), React detects that the dynamic import is not actually loading a separate chunk and issues a warning. This indicates that code-splitting is not working as intended, and the component will not be split into a separate bundle.
How do I fix "Warning: lazy() resolving to the same value"?
This warning occurs when React.lazy() receives the same component value instead of a promise from a dynamic import. It typically happens when the lazy function is not properly structured to return an import() statement. Understanding the correct lazy() syntax and avoiding duplicate imports prevents this warning and ensures code-splitting works as intended.
What causes "Warning: lazy() resolving to the same value"?
Passing a non-dynamic import to lazy() - importing the component at the top level and passing a reference instead of a dynamic import Using a function that returns the component directly instead of an import statement Forgetting to use the import() syntax and instead using a regular require or import statement
Is the "Warning: lazy() resolving to the same value" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading