How to fix Component is not exported as default in React

ReactBEGINNERMEDIUMUpdated Dec 11, 2025· 102 views

React (and bundlers that target it) throws this error when you import a component as a default export but the module only exposes named exports. Align the import/export style or re-export the named symbol as the default so React actually receives the component it expects.

Quick fix

Fixes Component is not exported as default

// Export a default React component
export default function ProfileCard() {
  return <div>Profile</div>;
}
  1. Export the component as the default export
  2. Match the import to the actual export
  3. Add a default re-export when working with loaders
  4. Confirm aliasing/tsconfig settings don’t hide the default export
react — error
// Export a default React component
export default function ProfileCard() {
  return <div>Profile</div>;
}
Component is not exported as default

What this error means

React components are just modules, and a default import (`import Component from './Component'`) assumes the module exposes a default export containing the React element definition. When the module only has named exports (for example `export function Component()` or `export const Component = ...`), the default import resolves to `undefined`, and React reports that the component is not exported as default. The error can also surface when using bundler helpers like `React.lazy`, `next/dynamic`, or suspense wrappers because they grab `.default` from the imported module. Without a proper default export, the loader cannot locate the component and the UI fails to render.

Typical symptoms

  • Build or runtime failure with the error message 'Component is not exported as default'
  • React Router, Next.js, or Suspense boundaries stop rendering the lazily loaded component
  • Console shows unhandled Promise rejection from dynamic imports
  • Component reference is `undefined` where a JSX element was expected
  • Page remains blank or falls back to error boundaries instead of rendering the component

Common causes

  1. The component file only uses named exports (`export const Component`) and lacks a default export
  2. The import statement uses a default import (`import Component from ...`) even though only named exports exist
  3. A directory index, barrel file, or re-export rounds up named exports but never re-exports one as default
  4. Bundler-specific helpers (React.lazy, next/dynamic) expect `.default` and fail when the exported module is purely named

How to fix "Component is not exported as default"

1Export the component as the default export

Update the component file so it has a default export. For example:

javascript
// Export a default React component
export default function ProfileCard() {
  return <div>Profile</div>;
}

If the component already exists as a named declaration, re-export it as the default at the bottom of the file:

javascript
const ProfileCard = () => {
  return <div>Profile</div>;
};

export default ProfileCard;
2Match the import to the actual export

Keep the component as a named export and change the import site to use destructuring:

javascript
// In ProfileCard.jsx
export const ProfileCard = () => <div>Profile</div>;

// In App.jsx
import { ProfileCard } from './ProfileCard';

Make sure the import path points directly to the file that exports the component rather than a barrel file that only re-exports named members.

3Add a default re-export when working with loaders

Tools such as React.lazy, next/dynamic, and other code-splitting helpers always read module.default. If the source file exposes named exports, create a tiny wrapper that re-exports the named component as the default:

ProfileCardLazy.jsx

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

Then keep the helper pointing at the wrapper:

javascript
const LazyProfile = lazy(() => import('./ProfileCardLazy'));
4Confirm aliasing/tsconfig settings don’t hide the default export

Double-check that TypeScript or bundler settings aren’t substituting a CommonJS module without a default export. Enabling esModuleInterop or allowSyntheticDefaultImports helps when importing CommonJS modules, but modules authored as ES modules should explicitly provide export default. Ensure Webpack/Next.js path aliases resolve to the correct file, not an index that lacks the default export.

Advanced notes

If you need to keep several named exports for testing or reusability, keep a dedicated default re-export that points to the primary component. Next.js app/ routes and React Server Components assume default exports, so missing them can surface as errors in the server logs even before the client bundle loads. Where you cannot change the original module (e.g., a dependency), wrap it in a tiny module that does export { Component as default } from 'dependency'; so that React receives the default it expects.

Frequently asked questions

What does "Component is not exported as default" mean?
/Component') assumes the module exposes a default export containing the React element definition. ), the default import resolves to undefined, and React reports that the component is not exported as default. default from the imported module.
How do I fix "Component is not exported as default"?
React (and bundlers that target it) throws this error when you import a component as a default export but the module only exposes named exports. Align the import/export style or re-export the named symbol as the default so React actually receives the component it expects.
What causes "Component is not exported as default"?
The component file only uses named exports (export const Component) and lacks a default export The import statement uses a default import (import Component from ...) even though only named exports exist A directory index, barrel file, or re-export rounds up named exports but never re-exports one as default
Is the "Component is not exported as default" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading